Question

我有两个均使用selec2.js的选择元素，第一个选择元素具有从数据库填充的下拉选项，现在我要做的是从选择元素1中选择一个选项，获取值并发送该值通过ajax查询数据库并返回匹配结果，并将结果填充到第二个select元素中。不幸的是，我还没有成功从服务器返回数据，下面是我的代码，哦，我正在使用laravel。

$('#province').on('change', function (e) {
    var data = $("#province option:selected").val();
    $.ajax({
        url: "{{route('list-townships')}}",
        type: 'get',
        data: {
            province_id: data
        },
        success: function (response) {
            console.log(response);
            response.filter(function (response) {
                if (response) {

                   //Append data to the 2nd select element

                }
            })
        },
        error: function (err) {}
    })
});

Answer 1

好的，我在这里发现了问题，由于laravel CSRF请求保护，我忘记了在ajax标头中定义CSRF令牌。完整的代码如下。

  $(document).ready(function() {
 $.ajaxSetup({
     headers: {
         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     }
 });
 $('#province').on('change', function(e) {
     var data = $("#province option:selected").val();
     console.log(data);
     $.ajax({
         url: "{{route('list-townships')}}",
         type: 'get',
         data: {
             province_id: data
         },
         success: function(response) {
             console.log(response);
             response.filter(function(response) {
                 if (response) {
                     var townships = new Option(response.name, response.id, false, false);
                     $('#township').append(townships).trigger('open');
                 }
             })
         },
         error: function(err) {}
     })
 });

}）;

使用select2.js发送Ajax请求

1 个答案: