使用 JQuery 和 JSON 将数组从 PHP 传递到 Javascript

Question

我有一个游戏，它每 10 秒刷新一次 MySQL 数据库中的信息。每次发生这种情况时都会调用一个 JS 函数。我无法执行成功功能，我也不知道为什么。控制台上也没有错误。

Javascript：

function refreshStats() {
    console.log("number 1");
    $.ajax({
        url: "refreshData.php",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType : 'json',
        data: { },
        cache: false,
        async: true,
        success: function (msg) {
            if(msg){
                console.log("number 2");
                var arr = JSON.parse(msg);
                document.getElementById("interface_stats").innerHTML =
                    "Fatigue: " + arr[0];

            }

        }
    });
}

PHP：

<?php

$username = $_POST['user'];
ini_set('display_errors', 1);
error_reporting(E_ALL);

$con = mysql_connect("localhost","redacted","redacted");
if (!$con)
{
    die('SQL error! Aborting: ' . mysql_error($con));
}
$db = mysql_select_db("aftertheend",$con) or die("Database error! Aborting. Inform the admin.");
$query = "SELECT fatigue, food, water, radiation, condition FROM users WHERE username='TheMightyThor'";
$result = mysql_query($query, $con);

$data = mysql_fetch_row($result);

$stats = [
    "fatigue" => $data[0],
    "food" => $data[1],
    "water" => $data[2],
    "radiation" => $data[3],
    "condition" => $data[4]
    ];

echo json_encode($stats);


?>

Answer 1

我认为您的 PHP 返回的是错误，而不是您期望的 JSON。因为你有dataType: 'json'，jQuery 会尝试解析响应，但是失败了。发生这种情况时，jQuery 不会调用 success 回调。

如果可以，请使用 Firebug 查看 ajax 调用返回的内容。另一种方法是暂时更改为dataType: 'html'，然后将您的success 回调更改为：

success: function(msg) { alert(msg); }

希望当您看到返回的消息时，它将有助于确定问题。但是，您应该做的一件事是添加代码来处理查询无法执行以及没有从数据库中获取行的情况。您可以将以下代码添加到 PHP 文件中：

$result = mysql_query($query, $con);

if (!$result) {
    die('Could not run query: ' . mysql_error($con));
}

if (mysql_num_rows($result) < 1) {
    echo 'null';
    exit;
}

$data = mysql_fetch_row($result);

不过，Ajax 调用也存在一些问题：

(1) 您指定了contentType: "application/json; charset=utf-8"，但您没有发送 JSON。你应该这样做：

data: JSON.stringify({}),

但是如果你这样做了，你就不能使用$_POST函数获取服务器上的数据。因此，您可能希望摆脱 contentType 设置。请参阅此SO answer 了解更多信息。

(2)当你指定dataType: 'json'时，JQuery会在调用成功回调之前将响应解析为一个对象，所以msg参数应该已经是一个对象了。因此，您不应该拨打JSON.parse(msg)。

(3) 您正在从 PHP 文件返回一个关联数组。这将被转换为 JavaScript 对象，而不是数组。

我认为你应该尝试以下方法：

$.ajax('refreshData.php', {
    type: 'post',
    dataType: 'json',
    data: { },
    cache: false,
    success: function (data) {
        if (data) {
            $('#interface_stats').html('Fatigue: ' + data.fatigue);
        }
    }
});