JQuery AJAX Post данные неопределенного базового примера
HTML:
<html>
<head>
<title>Page Title</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "script.js"></script>
</head>
<body>
<button onclick = "Posty()">click</button>
<p id = "result"></p>
</body>
</html>
скрипт.js:
function Posty() {
var pointless = "i am indeed";
$.post("server.php", pointless, PostyReturned());
}
function PostyReturned(data) {
var output = document.getElementById("result");
output.innerHTML = data;
}
сервер.php:
<?php
$array = [
"foo" => "bar",
"bar" => "foo",
];
echo(json_encode($array));
die();
?>
Я максимально упростил код, который выдает мне ошибку, чтобы сэкономить ваше время. Когда я нажимаю кнопку, тег #result становится «неопределенным». В Chrome DevTools я вижу, что запрос действительно возвращает:
{"foo":"bar","bar":"foo"}
Я знаю, что ошибка до глупости проста, но я прочитал все связанные с ней сообщения об ошибках, которые смог найти, я прочитал все документы, и ни один из них не помог, поэтому теперь я публикую его сам, чтобы, надеюсь, положить конец своим страданиям.
Приветствую кучу заранее.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Похоже, вам нужно передать данные из результата публикации в вашу функцию PostyReturned(). Я не знаю полной специфики, но корень проблемы заключается в порядке выполнения этих функций. Функция $.post асинхронна, а ваша функция синхронна. Я обнаружил, что эта статья поможет разобраться в этом лучше, чем я могу объяснить прямо сейчас.
Я изменил код, чтобы функция успеха передала данные из результата публикации в вашу функцию PostyReturned(). Теперь это работает по назначению:
function Posty() {
var pointless = "i am indeed";
$.post("server.php", pointless, function(data) {PostyReturned(data)});
}
function PostyReturned(data) {
var output = document.getElementById("result");
output.innerHTML = data;
}
Результат отрегулированной функции:
Спасибо, Шакима, ваше решение отличное. Так уж получилось, что я решил проблему как раз перед тем, как увидел ваш ответ. Я полагаю, как вы заявили, что когда я написал PostyReturned(), он вызывает функцию сразу синхронно, вместо того, чтобы назначать ее как функцию успеха, как предполагалось. Ваше решение назначает функцию успеха как функцию, которая вызывает PostyReturned, которая отлично работает.
Лучшее решение, однако, состоит в том, чтобы удалить круглые скобки после имени функции, чтобы она не вызывала функцию сразу, а вместо этого только давала ссылку.
function Posty() {
var pointless = "i am indeed";
$.post("server.php", pointless, PostyReturned);
}
function PostyReturned(data) {
var output = document.getElementById("result");
output.innerHTML = data;
}
Этот код работает так, как я изначально предполагал. ура :)