时间戳

首页 > 解决方案 > JQuery AJAX 发布数据未定义准系统示例

javascript - JQuery AJAX 发布数据未定义准系统示例

问题描述

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"}

我知道这个错误非常简单，但我已经阅读了我能找到的每一个相关的错误帖子，我已经阅读了所有文档，但没有任何帮助，所以我现在自己发布它，希望能结束我的痛苦。

提前欢呼一堆。

标签： javascriptphphtmljqueryajax

解决方案

谢谢Shakima，您的解决方案很棒。碰巧我在看到你的回复之前就解决了这个问题。我相信正如您所说，当我编写 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;
}

这段代码按我最初的意图工作。耶 ：）

推荐阅读