Laravel select2未找到结果

时间:2018-03-22 11:12:17

标签: php jquery ajax laravel jquery-select2

最近我遇到了集成select2和laravel的问题。

我想调用ajax请求来过滤用户但我找不到结果。

我在localhost中创建了测试文件:

<html>
<head>
<script   src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>

<select class="js-data-example-ajax"></select>

<script>

$('.js-data-example-ajax').select2({
  ajax: {
    url: 'ajax.php',
    dataType: 'json'
    // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
  }
});
</script>

Ajax.php

<?php echo "{
  \"results\": [
    {
      \"id\": 1,
      \"text\": \"Option 1\"
    },
    {
      \"id\": 2,
      \"text\": \"Option 2\"
    }
  ]
}";

运行正常但是当我在laravel刀片模板中使用相同的脚本时,我发现了Nore sult:

index.blade.php(注意:我在头部加载了jquery和select2)

<select class="js-data-example-ajax"></select>

<script>

    $('.js-data-example-ajax').select2({
        ajax: {
            url: 'http://localhost/ajax.php',
            dataType: 'json'
            // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
        }
    });
</script>

1 个答案:

答案 0 :(得分:2)

如果你想在laravel项目中运行你的例子,你应该将Ajax.php文件移动到你的公共文件夹。 如果你希望你的列表不仅仅是一个静态的json内容,你应该为一个生成select2元素的函数做一个路由

<强> web.php

Route::get('select2list', 'TestController@select2list');

<强> TestController.php

public function select2list()
{
    //generate your list in the way you want
    $temp = '{
      "results": [
           {
              "id": 1,
              "text": "Option 1"
           },
           {
              "id": 2,
              "text": "Option 2"
           }
         ]
        }';
    die(json_decode( $temp ));
}

要在您的视图中加载此列表,您应该像这样

创建此ajax请求
var mySelect2Elements;
$.ajax({
    url: "/select2list",
    dataType: 'json',
    type: "GET",
    success: function (data) {

         alert( data );
         mySelect2Elements = data;

    }
}).done(function() {
    $('.js-data-example-ajax').select2(
       { data: mySelect2Elements}
    );
});