Select2 застрял на «Поиске ...» Параметры раскрывающегося списка AJAX
Я столкнулся с проблемой, когда в раскрывающемся списке Select2 продолжает отображаться «Поиск ...» (скриншот прилагается)
Это мой JS-код:
<script>
$(document).ready(function() {
$("#js-data-example-ajax").select2({
placeholder: 'Search for a stock',
ajax: {
url: "http://127.0.0.1:8000/stocks_list",
contentType: 'application/json',
dataType: 'json',
type: "GET"
},
});
});
</script>
Поле выбора HTML:
<select style = "width: 300px;" id = "js-data-example-ajax" name = "js-data-example-ajax" class = "js-data-example-ajax"></select>
Конечная точка в приведенном выше вызове AJAX возвращает объект JSON с ключом «результаты» и списком объектов для результатов поиска (как и ожидалось Select2), как показано ниже:
Ответ от скриншота локальной конечной точки
Я ожидаю отобразить «текстовые» поля в качестве результатов раскрывающегося списка в результатах поиска, и до сих пор я следил за документами Select2.
Спасибо @Barkermn01, я изначально подозревал это, но я даже пробовал внешние URL-адреса API (например, те, что указаны в документах Select2 -> api.github.com/orgs/select2/repos), это не решило проблему. Моя консоль пуста, сообщений об ошибках нет.
Внешний по-прежнему будет вызывать ошибки CORS, и, извините, последний комментарий F12, но вам не разрешено запрашивать ресурсы с других сайтов (другая схема, имя хоста или IP-адрес или порт), если они не отправляют заголовки, авторизующие ваш источник. пожалуйста, прочитайте developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Я добавил 'Access-Control-Allow-Origin' = "localhost/scalefin/dashboard/investments.php" в заголовок моего API, но все та же проблема.
вам также нужны Access-Control-Allow-Method: GET, OPTIONS, и эти 2 не точны, но это то, что я использую для них Access-Control-Expose-Headers: Origin, X-Requested-With, Content-Type и Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type
Теперь я получил ошибку на консоли; Доступ к XMLHttpRequest по адресу «127.0.0.1:8000/stocks_list?_type=query » из источника « localhost» был заблокирован политикой CORS: ответ на предварительный запрос не проходит проверку контроля доступа: нет «Доступ Заголовок -Control-Allow-Origin присутствует на запрошенном ресурсе. Но я уже добавил эту политику в заголовок ответа?
Это будет означать, что вы еще не добавили заголовки CORS, добавили ли вы их в код страницы stocks_list (я предполагаю, что вы это сделали), поэтому нам нужно будет увидеть код для файла PHP, затем
Да, я дважды подтвердил на вкладке «Сеть» в Chrome, заголовок ответа для моего API показывает: заголовки-разрешения-доступа: Origin, X-Requested-With, Content-Type access-control-allow-method: GET, OPTIONS доступ-контроль-разрешение-происхождение: локальный хост доступ-контроль-разоблачения-заголовки: происхождение, X-Requested-With, Content-Type
Я добавил и ответил, что это общий вопрос, но для того, чтобы исправить это именно в вашем коде, вам потребуется добавить код PHP к вашему вопросу.
Ответы 1
Итак, ваша ошибка вызвана CORS,
CORS — это боль в заднице для локальной разработки, то, как вы справляетесь с CORS, — это цель запроса AJAX, которая должна возвращать определенные заголовки, и самый простой способ сделать это в PHP — просто использовать приведенный ниже код:
Это самое допустимое, что вы можете сделать с поддержкой CORS для пользовательских заголовков, если вам нужно использовать пользовательские заголовки, которые вам нужны для обновления заголовков Access-Control-Allow-Headers и Access-Control-Expose-Headers.
<?php
$givenOrigin = get_header("Origin")??get_header("origin");
header("Access-Control-Allow-Origin: {$givenOrigin}");
header("Access-Control-Allow-Headers: GET, POST, PUT, PATH, DELETE, OPTIONS, HEAD"); // this allows all HTTP methods
header("Access-Control-Allow-Methods: Origin, X-Requested-With, Content-Type, Accept, localization");
header("Access-Control-Expose-Headers: Origin, X-Requested-With, Content-Type, Accept, localization");
Я добавил это в свой <head>: <?php header("Access-Control-Allow-Origin: 127.0.0.1:8000/stocks_list"); header("Access-Control-Allow-Headers: GET, OPTIONS"); // это разрешает все HTTP-методы header("Access-Control-Allow-Methods: Origin, X-Requested-With, Content-Type, Accept, localization"); header("Access-Control-Expose-Headers: Origin, X-Requested-With, Content-Type, Accept, локализация"); ?>
Заголовки PHP не должны выводиться перед любым содержимым, оно должно быть в самом верху вашего файла. Единственная строка кода, которая должна быть выше этого, — это если вы используете пространство имен, то определение namespace идет непосредственно перед этим блоком кода. если вы используете error_reporting(E_ALL)l, вы увидите, что он жалуется на заголовки после содержимого
Я добавил его даже выше моего открытия <html> и чуть ниже него, все та же ошибка в консоли. Даже пробовал «Access-Control-Allow-Origin: *»
Поэтому, не видя вашего PHP-кода и исходя из того, что вы сказали, я понятия не имею, почему он не работает, но мы сузили его до того, что это определенно ошибка CORS.
Это мой код до тела: codeshare.io/VZMeQ4
отредактируйте свой вопрос, чтобы включить его, пожалуйста...
Добавил ссылку выше
о, вы помещаете это не в тот файл, вам нужно поместить его в файл, который дает вам stocks_list, а не в файл, выполняющий AJAX-соединение с ним.
Ваш веб-сервер находится на том же имени хоста и порте? Итак, в этом случае вы разговариваете с 127.0.0.1 через порт 8080 — это URL-адрес, к которому вы подключаетесь, который запускает этот jQuery также на 127.0.0.1 и порту 8080, иначе вы столкнетесь с проблемами [CORS], которых у вас нет. заявил, что говорит «консоль» браузера, нажмите 12, перейдите на вкладку консоли и найдите любые ошибки.