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

Question

嗨，我正在开发一个 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值可以立即更新，但是传递到后端（

selected_label

）的selected值无法立即更新。你能帮我弄清楚吗？非常感谢！

Answer 1

根据您所描述的问题，我想您想要实现的是 - 当您在给定的 SELECT 列表中实时进行选择时，在页面上显示结果。如果我错了请纠正我。

如果这是正确的，那么我已经提到了 02 种方法可以解决这个问题。

版本01 您尝试构建的功能与 SPA 配合良好 - 集成了状态管理技术（例如 REDUX 或 VUEX）的单页应用程序，但是，如果您尝试使用 AJAX 在 Laravel 中实现此目的，那么每次点击的处理速度将会更长因为 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);

      };
    });
  });
});

<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>