Ajax jquery post 脚本不起作用答案

【问题标题】：Ajax jquery post script not workingAjax jquery post 脚本不起作用
【发布时间】：2016-12-22 00:30:30
【问题描述】：

我正在关注本教程https://openenergymonitor.org/emon/node/107。我想做的是，使用 jquery 和 php 从 mysql 数据库中获取数据。我完全按照教程所说的做了，但我无法让它工作。我在加载页面时收到失败警报。

这就是我所做的：

api.php:

$dbhandle = mysql_connect($hostname, $username, $password)
or die("Unable to connect to MySQL");

$selected = mysql_select_db($db,$dbhandle)
or die("Could not select examples");

$result = mysql_query("SELECT * FROM todolist");
$array = mysql_fetch_row($result);

echo json_encode($array);

（我知道最好使用PDO，但这只是为了测试。）

jquery 脚本：

  <script language="javascript" type="text/javascript">
  $(function () {
            $.ajax({                                      
              url: 'api.php', data: "", dataType: 'json',  
              success: function(data) { 
                var id = data[0]; 
                var description = data[1]; 
                 $('#output').html("<b>id: </b>"+id+"<b> description: </b>"+description); 
              },
              error: function() {
                alert("Fail");
              }
            });
          }); 
  </script>

当我访问 api.php 时，我得到了：

["161","true","werken\n","12"]

当我使用 console.log(arguments) 时，会显示：

[Object, "parsererror", SyntaxError: Unexpected token < in JSON at position 0 at Object.parse (native) at parseJSON …]
0
:
Object
1
:
"parsererror"
2
:
SyntaxError: Unexpected token < in JSON at position 0 at Object.parse (native) at parseJSON (https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js:16:11709) at b$ (https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js:16:1382) at w (https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js:18:8326) at XMLHttpRequest.d (https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js:18:14247)
callee
:
(err)
length
:
3
Symbol(Symbol.iterator)
:
values()
__proto__
:
Object

我现在尝试让这项工作大约 3 个小时，这让我非常抓狂。我希望有人能解释我的脚本的问题。

编辑：

我修好了。我在 api.php 中包含的页面有问题。

【问题讨论】：

在浏览器中按 F12 查看网络请求并确保没有错误并且看起来像您预期的那样，然后查看控制台是否有任何错误。除了alert("Fail")，您还可以使用console.log(arguments) 来查看传递给error 函数的所有信息，看看是否有任何信息。
您在开发者控制台中看到了什么？此外，这是 GET 请求，而不是 POST。
顺便说一句，它看起来不像描述在data[1]，它在data[2]。您应该选择所需的特定列，或使用mysql_fetch_assoc，以便您可以按名称访问列。
@JasonP 控制台中没有显示任何错误。但是当我使用 console.log(arguments) 时，出现了一些东西，我将它添加到问题中，因为它太长了。
你能console.log(data);吗？

标签： php jquery mysql ajax

【解决方案1】：

这可能是因为 url 没有使用绝对路径。你是在本地机器上运行它吗？ 2 个脚本（html 和 php）是否在同一个目录中？

您应该尝试使用浏览器的开发者工具来检查和跟踪网络 ajax 调用。您可能遇到了 404 错误。

您可以通过这样做获得有关错误的更多信息：

error: function(err) {
                console.log(err);
              }

错误的详细信息将显示在您的开发者工具控制台上。大多数情况下，打开开发者工具是通过在 PC 上按 Ctrl+Shift+I 或使用浏览器菜单来完成的。

【讨论】：

这是在一个网站上，脚本在同一个目录下。我收到 0 个错误。当我使用 console.log(err) 时，这会出现： Object {readyState: 4, responseText: "↵↵↵ ["161","true","werken\n","12"]↵↵↵↵"，状态：200，状态文本："OK"}
所以这意味着你的 php 脚本没有返回 JSON 对象。显然它会返回一个 HTML 页面，其中包含 body 标记中的 JSON 字符串。