在JavaScript中循環遍歷json_encoded PHP數組

Question

我在遍歷從PHP通過Ajax請求傳遞的數組時遇到問題。

由於某種原因，我的javascript認為每個字符都是數組的一部分，或者我的響應變量只是作為字符串傳遞。

這是我的JavaScript：

<script>        
    $(function() {
        $.ajax({
            url: "/dev/editButton/get_names.php",
            success: function(response) {
                console.log(response);
            }
        });
    });
</script>

這是我的PHP：

<?php
include '../portfolio/libraries/settings.php';

$connect = mysqli_connect($HOST, $DB_USER, $DB_PASS, $DATABASE);
$query = "SELECT * FROM AUTH_User";
$result = mysqli_query($connect, $query);

$names = array(); 

while ($row = mysqli_fetch_array($result)) {
    array_push($names, $row['FirstName']." ".$row['LastName']);
}

echo json_encode($names);
?>

我得到的響應如下所示：

["Test Person","Test2 Person"]

但是，如果我使用javascript遍歷此過程，或者只是打印出response[0]每個字符都將作為數組的一部分。 第一個元素是[ ，下一個元素是"等。

我希望Test Person是一個要素，而Test2 Person是另一個要素。

有人知道我在做什么錯嗎？ 謝謝！

Answer 1

您需要在響應上使用JSON.parse。 如果調用該函數，您將只獲取JavaScript字符串中的字符索引。

 var resultArray = JSON.parse(response);
 resultArray[0];   //Should Be "test Person"

Answer 2

.ajax方法的結果根據響應的Content-Type標頭進行解釋。 如果不正確或未指定，則response變量將包含原始json代碼作為字符串。

因此，一種解決方案是通過添加以下行來更改PHP代碼：

header("Content-Type: text/json");

文件 ：

預處理的類型默認情況下取決於響應的Content-Type，但是可以使用dataType選項顯式設置。 如果提供了dataType選項，則將忽略響應的Content-Type標頭。

您可以將文本解析為對象，或者可以通過在調用中指定數據類型讓JQuery為您完成。 然后， response參數將保存對象，而不是原始的json字符串。

文件 ：

如果指定了json，則在將響應作為對象傳遞給成功處理程序之前，將使用jQuery.parseJSON解析響應。 可通過jqXHR對象的responseJSON屬性使已解析的JSON對象可用。

$(function() {
    $.ajax({
        url: "/dev/editButton/get_names.php",
        datatype: "json",
        success: function(response) {
            console.log(response);
        }
    });
});

Answer 3

在這種特殊情況下，您可以使用

        success: function(response) {
            response = eval(response);
            console.log(response);
        }

但這是不好的做法。

真正的最佳解決方案是按如下所示修改ajax調用：

   $(function() {
    $.ajax({
        url: "/dev/editButton/get_names.php",
        datatype: 'json',
        success: function(response) {
            console.log(response);
        }
    });
});

指定的數據類型將請求返回的數據為json，並且jquery將自動將其解析為javascript對象。

Answer 4

您必須將JSON解析為數組。 您可以使用以下代碼執行此操作：

var arr = $.parseJSON(response);

現在arr [0]應該是“ Test Person”。

Answer 5

您可以用困難的方式做到這一點，或者這樣：

首先，您需要指定AJAX的返回類型。

$(function() {
    $.ajax({
        url: "/dev/editButton/get_names.php",
        dataType: "json",
        success: function(response) {
            console.log(response);
        }
    });
});

或者，您可以通過以下方式進行操作：

$(function() {
    $.getJSON("/dev/editButton/get_names.php", function(response) {
        console.log(response);
    });
});

為此，您需要在PHP中相應地指定HTML標頭：

<?php
include '../portfolio/libraries/settings.php';

$connect = mysqli_connect($HOST, $DB_USER, $DB_PASS, $DATABASE);
$query = "SELECT * FROM AUTH_User";
$result = mysqli_query($connect, $query);

$names = array(); 

while ($row = mysqli_fetch_array($result)) {
    array_push($names, $row['FirstName']." ".$row['LastName']);
}

header("Content-Type: application/json");
echo json_encode($names);
exit();
?>

exit(); 只是為了安全起見，因此您不會破壞有效的JSON格式。

JSON代表JavaScript Object Notation，因此您不必在那里做任何復雜的事情。 這是您可以使用的一個簡單循環：

for(var i in response) {
    console.log(response[i]);
}

另外，如果響應不是數組而是具有屬性的對象，則可以通過先獲取正確的鍵來遍歷對象屬性：

var objKeys = Object.keys(response);
for(var i in objKeys) {
    var key = objKeys[i];
    console.log(response[key]);
}

我希望這有幫助！