Связанный список с PHP и AJAX
У меня проблемы при создании связанного списка в HTML, позвольте мне объяснить:
В HTML у меня есть два выбора:
<!-- This select WORKS and read the opened projects from de database -->
<select name = "project" id = "project">
<option value = "0">Select a project</option>
<?php if (isset($result2)): ?>
<?php foreach ($result2 as $res): ?>
<option value=<?php echo $res['c_project_id'] ?>><?php echo $res['d_name'] ?></option>
<?php endforeach ?>
<?php endif ?>
</select>
<!-- This doesn't work, but I want: When I select a project, the project's categories go here -->
<select name = "category" id = "category">
</select>
НАСТОЯЩИЕ ДАННЫЕ следующие: Таблица ПРОЕКТ
c_project_id | d_name | d_description | n_budget | d_state
1 | Test | Test Project | 100 | Open
2 | Web | Web APP | 3000 | Open
3 | C Test |Closed Project | 100 | Closed
4 | Certif.| Certificates | 2500 | Open
Категории таблиц (связаны с проектом таблицы)
c_category_id | d_name | d_description | c_project_id
1 | General| General cat | 1
2 | Test | Test cat | 1
3 | General| General cat | 2
4 | General| General cat | 3
5 | Nothing| Nothing cat | 3
6 |Program | Programming | 2
...
У меня есть SELECT в html, который принимает имя и идентификатор проекта, это работает в select nº1
$statement2 = $conexion->prepare("SELECT c_project_id, d_name FROM project WHERE d_state= 'Open'");
$statement2->execute();
$resultado2 = $statement2->fetchAll();
Теперь я хочу: когда я «щелкаю» по первому выбору, второй выбор делает утверждение и выполняет второй выбор. Для тестирования просто написал простой вариант. Я пробовал использовать AJAX и PHP, но второй вариант пуст:
AJAX:
$( "#project" ).change(function() {
var select = $( "#project option:selected" ).val();
console.info(select); //just for testing that I took the value.
$.ajax({
type: "POST",
url: "phpPage.php",
data: { selectedProject : select }
}).done(function(data){
console.info("Done");
$("#category").html(data);
});
});
И PHP:
if (isset($_POST["selectedProject"])){
$proy = $_POST["selectedProject"];
$output = "<option value='100'> Select your category </option>";
if ($proy != 0){
$output.= "<option>" . $proy . "</option>";
}
echo $output;
}
Но это мне ничего не вернет, все пусто.
НАКОНЕЦ, когда я попытался отладить, я заметил, что в одном из ответов PHP HTML-код () написан в начале страницы (в ответе):
<option value='100'> Select your category </option><option>1</option>
<!DOCTYPE html>
<html lang = "es">
<head>
<title>
...
Извините за этот огромный вопрос, но я трачу на это много времени и не знаю, что может случиться. Спасибо!
Точно так же, второй вариант пуст, и в ответе PHP все написано перед кодом HTML.
Поскольку вам нужен только базовый html тегов option, вам больше не нужен html. Так что добавьте exit; сразу после echo $output;
Больше информации о .success (или успехе: вариант) против .done ... stackoverflow.com/a/8840315/2960971
@IncredibleHat потрясающе !!, это работает, но вы можете объяснить мне, почему? Я правда не понял этого
@AliSheikhpour, это совершенно неправильно. .done () - это правильный метод интерфейса jQuery Deferred / Promise ($ .ajax () возвращает отложенный объект) для вызова при успешном выполнении запроса. Вы, несомненно, думаете об обратном вызове «успеха», который предоставляется как опция в вызове $ .ajax (). Отложенный интерфейс не предоставляет никакого метода, называемого «success ()». Перед написанием проверьте документацию ... api.jquery.com/jquery.ajax и api.jquery.com/category/deferred-object. Нет ничего плохого в этом конкретном аспекте кода OP.
В любом случае, что касается вашего вопроса ... "Вы можете объяснить мне, почему", см. Недавно опубликованный ответ IncredibleHat. Вы используете один и тот же PHP-скрипт для вывода битов, необходимых для вашего вызова ajax и для вашей главной страницы. Как правило, смешивать их - плохой дизайн, но если вы будете осторожны, то сможете. Причина, по которой это изменение работает, заключается в том, что exit останавливает работу вашего скрипта и, следовательно, останавливает его выдачу большого количества другого HTML, который предназначен для загрузки главной страницы и не предназначен для того, чтобы быть частью вывода вызова ajax.
Да, я прочитал это и думаю, что понял суть, я не мог думать об этом ... СПАСИБО !!!
У меня есть подкаталог, заполненный «маленькими скриптами» для вызовов ajax. Но иногда, когда я немного ленив (или иду слишком быстро), я вставляю код реакции ajax рядом с самой верхней частью какого-то громоздкого скрипта, над которым я работаю (просто для того, чтобы все заработало) ... затем позже дергаю эта вершина врезается в отдельную пилку, когда я прибиваю. Главное, что нужно понять, это то, что ajax обычно используется для «манипулирования текущим html-документом» ... поэтому вам нужны только данные json для использования или фрагменты html для вставки / замены частей.
Ответы 1
Давайте посмотрим, что у вас есть и чем вы хотите заниматься. Во-первых, у вас есть пустой элемент select:
<select name = "category" id = "category">
// empty
</select>
Затем вы отключаете вызов ajax, который возвращает данные с вашего PHP. Этот ajax просто берет весь возвращенный html из PHP и помещает его в середину вышеупомянутого select:
$("#category").html(data);
Ваш PHP - это то место, где вы создаете слишком много информации на выходе. Обычно это хорошая идея, чтобы изолировать ваши «сценарии ajax php» от обычных сценариев php полной сборки html. Таким образом, вы выводите только то, что вам нужно для этого конкретного вызова ajax.
В приведенном выше PHP у вас есть:
if (isset($_POST["selectedProject"])){
$proy = $_POST["selectedProject"];
$output = "<option value='100'> Select your category </option>";
if ($proy != 0){
$output.= "<option>" . $proy . "</option>";
}
echo $output;
}
// you must have more page generation below this based on your Q (?)
Вы можете либо изолировать приведенный выше код в новом сценарии ответа ajax (включая любые необходимые действия с базой данных и извлечение данных из базы данных на основе значения аргумента POST и т. д.) .... ИЛИ вы можете добавить exit; после вашего echo $output; .. .. пока никакой другой дополнительный html не выводился ДО этого блока if.
if (isset($_POST["selectedProject"])){
$proy = $_POST["selectedProject"];
$output = "<option value='100'> Select your category </option>";
if ($proy != 0){
$output.= "<option>" . $proy . "</option>";
}
echo $output;
exit; // <-- halt so none of the other following html spills out
}
Спасибо большое, я думаю, понимаю. Удивительный
попробуйте
.successвместо.done