Laravel 立即更新所选值并传递到后端-解网

问：

嗨，我正在处理一个 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

Ajax Laravel 请求 Laravel-blade 选择

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

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

laravel update the selected value immediately and pass to the backend

评论

评论