Как заполнить выпадающий список локально сохраненным файлом JSON
Ниже приведен мой 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>');
});
});
});
Решение
В Laravel содержимое страницы, такое как сценарии, стили, изображения и т. Д., Обычно хранится в public папка. Поэтому я бы посоветовал вам сохранить ваш JSON-файл в папке public.
Тестирование вашего кода дало некоторые ошибки, и быстрое исправление вашего кода приведено ниже:
$(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
Другие решения
Создайте символическую ссылку из вашего публичного хранилища
ln -s storage/app/public public/storage
и использовать asset('storage/your.json')
Laravel rout.php
Route::get('/json/people', 'JsonController@people')->name('json.people');
Запустите команду artisan в вашем проекте root
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]);
}
Измени свой Jquery для Ajax запрос
$.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, вы можете удалить dataпеременная из вашего вызова Ajax:
$.ajax({
url: "/json/people"}).done(function(data) {
console.log(data);
// once you confirm your JSON data is here, do what you wish to achieve! :)
});
detector