Обратные вызовы jQuery ajax ".done" не срабатывают
Следующий код jQuery (postData) отправляет данные в простой php-файл и по завершении вызывает sendReply или sendFail. У меня есть console.info в функции postData, а обратные вызовы sendReply и sendFail также имеют console.info. Первый console.info отображается в консоли разработчика FF, а обратные вызовы - нет.
Файл php очень прост, потому что я новичок в публикации на php с помощью jQuery, и я хочу протестировать функцию обратного вызова, прежде чем продолжить.
Вот jQuery:
<form>
// form elements here, omitted for brevity
// the jQuery is called from a button click event
<div class = "btn_div">
<button class = "btn_joinnow" id = "btn_submit" style = "color:rgb(255,255,255)" onClick = "postData(event)">Click to submit data</button></div>
<script type = "text/javascript">
function postData(event) {
event.preventDefault();
var datastring = $("#echo_test").serialize();
console.info("Okay, I'm starting")
return $.ajax({
type: "POST",
url: "echo_test.php",
data: {post: datastring}
});
}
function sendReply() {
console.info("Okay, I'm done"); }
function sendFail() {
console.info("Okay, I failed"); }
postData().done(sendReply, sendFail);
</script>
</form>
Я мог бы связать обратные вызовы, но тогда event.preventDefault не работает:
<script type = "text/javascript">
function postData(event) {
event.preventDefault();
var datastring = $("#echo_test").serialize();
console.info("Okay, I'm starting")
return $.ajax({
type: "POST",
url: "echo_test.php",
data: {post: datastring}
});.done(function() {
console.info("Okay, I'm done");
}).fail(function() {
console.info("Okay, I failed");
});
}
Вот ультра-простой php:
<?php
echo "Hello world";
?>
Почему ни одна из функций обратного вызова не выполняется по завершении? Это функция jQuery или php? Консоль разработчика Firefox показывает это о php:
XML Parsing Error: no root element found Location: (file location) Line Number 4, Column 1:
Я работаю на своем локальном (Windows) компьютере, а не на своем облачном сервере. Это вся проблема?
Большое спасибо за любые идеи.
Поведение, которое вам нужно, не done(success, failure), а then(success, failure)
@u_mulder, если я удалю это, event.preventDefault не будет работать.
Если вы не удалите это, весь ваш скрипт перестанет работать, как только javascript обнаружит эту синтаксическую ошибку.
Вы знаете, что такое ошибка синтаксиса, верно?
@taplar, я изменил его на тогда, но такое же поведение
@u_mulder, как я уже сказал, когда я удаляю его, event.preventDefault не работает. Да, конечно, я знаю, что такое синтаксическая ошибка.
Если вы знаете, что это такое, то немного странно, что вы возражаете против исправления. «Если я удалю его, X перестанет работать» предполагает, что вы говорите, что должны оставить его, чтобы что-то заработало. что не аргумент
Мой комментарий then(success, failure) относился к первому фрагменту.
Дай мне секунду, я отвечу после того, как сделаю это.
@Taplar, я изменил строку postData().done(sendReply, sendFail); в postData(). Затем (sendReply, sendFail); - все равно не горит.
Ммм, ваш первый фрагмент, вы не передаете событие методу. А ведь в таком случае нет никакого события. Вы просто вызываете метод. Таким образом, аргумент необходимо будет удалить, а предотвращение по умолчанию будет удалено. Или выполните проверку if, чтобы убедиться, что он существует, прежде чем вызывать для него preventDefault.
onClick = "postData(event)" отправляет событие; и «функция postData (событие)» передает ее. Если я удаляю preventDefault, мы ссылаемся на новый URL-адрес (пустой экран). Вот чего я не хочу.
postData().then(sendReply, sendFail); <= эта строка. Нет события
Понимаю. Позвольте мне попробовать это сейчас. Предотвращение по умолчанию находится в самой функции, а не в обратном вызове, но я отвечу через минуту.
postData(event).then(sendReply, sendFail); все еще не работает. event.preventDefault работает, но обратный вызов не срабатывает.
Вы упускаете суть. В этом случае у вас нет события для передачи. У вас есть только событие в случае встроенной привязки. Таким образом, вы не можете просто передать event в метод и ожидать, что он будет существовать. Вот почему ваша логика должна выполнять проверку if, прежде чем пытаться предотвратить дефолт.
Хорошо, спасибо за комментарий. Я проголосовал за это.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вот рабочая версия с небольшими изменениями, так как ваш php не заботится о публикуемых вами данных.
Чтобы сохранить его как сообщение, я изменил его на jsonplaceholder, и после нажатия вы можете увидеть ответ в консоли.
<form>
<div class = "btn_div">
<button href = "google.com" class = "btn_joinnow" id = "btn_submit" style = "color:rgb(255,255,255)">Click to submit data
</button></div>
</form>
Я добавил ссылку в Google, чтобы убедиться, что preventDefault работает.
$("#btn_submit").on("click", function (event) {
event.preventDefault();
var datastring = JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
});
console.info("Okay, I'm starting");
return $.ajax({
type: "POST",
url: "https://jsonplaceholder.typicode.com/posts",
data: {post: datastring},
success: function (response) {
console.info(response);
},
error: function (error) {
console.info("Okay, I failed" + error);
}
});
});
Если вы хотите, чтобы это было проще, с помощью GET, вот кодовая ручка.
Спасибо за ответ. Я вижу, вы используете href вместо события onclick. Я попробую ваш пример сейчас и дам вам знать, что происходит.
Это работает, как вы показываете выше. Когда я меняю URL-адрес своего php-файла echo_test.php, я получаю сообщение «Хорошо, я потерпел неудачу [object Object]», поэтому предполагает, что проблема в моем php. Большое спасибо еще раз. Я выбрал ваш ответ как лучший и проголосовал за него.
Рад слышать. Причина, по которой вы получаете объект Object в качестве ответа, заключается в том, что ваш php отправляет эхо-объект. Если вы хотите сохранить ответ php в виде текста (а не json), измените функцию успеха на function(responseText) и console.info(responseText), и она должна работать
;.done— это ошибка синтаксиса.