使用 jQuery / JavaScript 解析 JSON 資料
使用 Web 服務或 API 時，接收 JSON 資料是很常見的。將此資料解析為可用的格式對於在網頁上顯示和操作資料是必要的。
問題陳述：
考慮以下回傳JSON 資料的AJAX 呼叫：
$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'http://example/functions.php',
data: { get_param: 'value' },
success: function (data) {
var names = data;
$('#cand').html(data);
}
});
});#cand div 中擷取的JSON 資料如下：this:
[
{ "id": "1", "name": "test1" },
{ "id": "2", "name": "test2" },
{ "id": "3", "name": "test3" },
{ "id": "4", "name": "test4" },
{ "id": "5", "name": "test5" }
]問題出現了：我們如何循環遍歷這個JSON數據並在單獨的 div 中顯示每個名稱？
解決方案：
到正確解析 JSON 數據，我們需要確保伺服器端腳本設定正確的 Content-Type: application/json 回應標頭。為了讓 jQuery 將資料識別為 JSON，我們需要在 AJAX 呼叫中指定 dataType: 'json'。
一旦我們有了正確的資料類型，我們就可以使用$.each() 函數來迭代資料：
$.ajax({
type: 'GET',
url: 'http://example/functions.php',
data: { get_param: 'value' },
dataType: 'json',
success: function (data) {
$.each(data, function (index, element) {
$('body').append($('<div>', {
text: element.name
}));
});
}
});或者，您可以使用$.getJSON() 方法來更簡潔方法：
$.getJSON('/functions.php', { get_param: 'value' }, function (data) {
$.each(data, function (index, element) {
$('body').append($('<div>', {
text: element.name
}));
});
});這將為JSON 資料中的每個名稱建立一個新的div 並將其顯示在網頁上。
以上是如何使用 jQuery 迭代並顯示 JSON 資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
