laravel立即更新所选值并传递到后端

bgibtngc 于 2023-11-20 发布在其他

关注(0)|答案(1)|浏览(96)

嗨，我正在做一个laravel项目，我想有一个选择，一旦我在选择中选择了一个选项值，所选的值就会立即更新并传递到后端。

<select name="survey_option" id="survey_option" class="flex space-x-3 items-center">
                                <option value="NoLink" disabled>Please select</option>
                                <option value="option1">option1</option>
                                <option value="option2">option2</option>
</select>

字符串
以下是我的脚本：

var $survey_option;

$(document).ready(function() {
                $('select[name=survey_option]').on('change', function() {
                    survey_option = $(this).val();
                    console.log(survey_option);
                });
            });

var datatable = $('#label-record-table').on('xhr.dt', function ( e, settings, json, xhr ) {
        }).DataTable({
            ajax:{
                url:"xxxxxx",
                type:"POST",
                dataType:"JSON",
                data: function (d) {
                    d.selected_label = survey_option;
                }
            },
            columns:[
                {data: xxxx},
            ]
        });

型
下面是我的后端代码：

$selected_label = $request->survey_option;

型
目前的结果是：ui中的选定值可以立即更新，但传递到后端的选定值（selected_label）不能立即更新。请你帮我弄清楚吗？非常感谢！

laravel

来源：https://stackoverflow.com/questions/77402844/laravel-update-the-selected-value-immediately-and-pass-to-the-backend

1条答案

按热度按时间

fdbelqdn1#

根据你所描述的问题，我想你试图实现的是-显示结果的页面上，当你在一个给定的SELECT列表中进行选择实时的基础上。请纠正我，如果我错了。
如果这是正确的，那么我已经提到了02种方法，你可以解决这个问题。

版本01您正在尝试构建的功能可以很好地与SPA -集成了状态管理技术（如REDUX或VUEX）的单页面应用程序一起使用，但是，如果您试图在Laravel中使用AJAX实现此功能，则每次单击的处理速度将更长，因为AJAX调用将处理阅读每个数据记录并传递更新。建议构建此功能的方法是使用使用AJAX提交表单的提交按钮。
版本02我注意到您的AJAX代码没有正确编写。我将在下面留下正确的代码沿着您的要求。请确保您也导入了jQuery v3.7或更高版本。

$(document).ready(function() {

  var survey_option;
  
  $('select[name=survey_option]').on('change', function() {
    survey_option = $(this).val();

    $.ajax({
      type: 'POST',
      url: '{{ route('xxx_ROUTE_NAME_HERE_xxx') }}',
      data: survey_option,
      success: function(data) {
          // Handle the success response load 
      },
      error: function(xhr, status, error) {
        // Handle any errors here
        console.error('AJAX Error:', status, error);

        console.error('Response Text:', xhr.responseText);

      };
    });
  });
});

个字符

赞(0）回复(0）举报 2023-11-20

我来回答

laravel立即更新所选值并传递到后端

1条答案

相关问题

热门标签

最新问答