Question

下面是我的JSON文件，我正在使用Laravel，而且我想知道在哪里存储我的json文件是正确的做法。

{
    "people": [
      "john",
      "jim",
      "mark"
     ]
}

我目前希望实现的是填充一个下拉列表，如下所示。

<form method="POST" action="/Update">
@csrf 
     <select name="dropdown" id="dropdown" onchange="this.form.submit()">
     </select>
</form>

这是我的jquery脚本，尝试执行此操作的方式，但是我遇到404 HTTP错误。就像我在上面提到的，您认为我应该将json文件本地存储在我的项目文件夹中。

$(document).ready(function() {

        var people = "storage/people.json";

        $.getJSON(people, function (data) {
            $.each(people,function(iIndex, sElement) {
      $('#dropdown').append('<option>' + sElement + '</option>');
   });
});
});

Answer 1

在Laravel中，页面内容（例如脚本，样式，图像等）通常存储在public文件夹中。因此，我建议您将JSON文件存储在“公共”文件夹中。

测试代码会出现一些错误，下面提供了对代码的快速修复：

$(document).ready(function() {
        var people = "/document/people.json";

        $.getJSON(people, function (data) {
            data.people.forEach(function(value, index){
                $('#dropdown').append('<option>' + value + '</option>');
            });
        });
});

此对您的jquery代码的调整有效，并且json文件的位置为public/document/people.json

Answer 2

创建从公众到存储的符号链接

ln -s storage/app/public public/storage

并使用asset('storage/your.json')

Laravel route.php

Route::get('/json/people', 'JsonController@people')->name('json.people');

在laravel根项目中运行artisan命令

php artisan make:controller JsonController

在您的JsonController中

创建一个名为people

的方法

public function people(Request $request)
{
    $data = file_get_contents(asset('storage/your.json'));
    return response()->json(['data'=> $data]);
}

为Ajax请求更改您的Jquery

$.ajax({
  url: "/json/people",
  data: {"_token": //you need to add a CSRF Token to your form. Fetch it via JQuery to add it here and send with your Ajax}
}).done(function(data) {
     console.log(data);
    // once you confirm your JSON data is here, do what you wish to achieve! :)
});

对于CSRF，如果愿意，可以将其添加为元标记，并按如下所述在Ajax中使用它：

<meta name="csrf-token" content="{{ csrf_token() }}" />

然后在您的Ajax调用之前，为您的Ajax添加设置：

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

如果您决定对CSRF使用元标记方法，则可以从Ajax调用中删除data变量：

$.ajax({
      url: "/json/people"
    }).done(function(data) {
         console.log(data);
        // once you confirm your JSON data is here, do what you wish to achieve! :)
    });

如何使用本地存储的JSON文件填充下拉列表

2 个答案: