如何使用jQuery / JavaScript解析JSON数据?

Question

我有一个AJAX调用，返回一些JSON数据，格式如下:

$(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 中，我将获得：

[ { "id" : "1", "name" : "test1" },
  { "id" : "2", "name" : "test2" },
  { "id" : "3", "name" : "test3" },
  { "id" : "4", "name" : "test4" },
  { "id" : "5", "name" : "test5" } ]

我该如何循环遍历这个数据并将每个名称放入一个

中？

- Patrioticcow

Answer 1

假设您的服务器端脚本没有设置正确的Content-Type: application/json响应头，您需要使用dataType: 'json'参数告诉jQuery这是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
        }));
    });
});

- Darin Dimitrov

---

成功。谢谢。我必须从我的PHP函数发送JSON还是可以发送任何内容？ - Patrioticcow

@Patrioticcow，你也可以发送JSON。在这种情况下，您需要在$.ajax函数中设置contentType: 'application/json'选项，并对data参数进行JSON序列化，像这样：data: JSON.stringify({ get_param: 'value' })。然后在您的php脚本中，您需要使用json_decode来获取原始对象。 - Darin Dimitrov

这个“done: function”是什么？它和“success”一样吗？我在文档中没有看到它。 - Buttle Butkus

我的JSON数据是{"0":{"level1":"done","level2":"done","level3":"no"}}，我该如何将其提取到每个变量中？我尝试使用$.each方法，但返回未定义的变量level1 = ele[0].level1;。 - 151291

@DarinDimitrov 如何在 Bootstrap 轮播中展示这些数据？ - TheCoderGuy

如果服务器端设置Content-Type为application/json，那么它会自动转换为JS对象吗？ - R.S.K

Answer 2

设置dataType:'json'将为您解析JSON：

$.ajax({
  type: 'GET',
  url: 'http://example/functions.php',
  data: {get_param: 'value'},
  dataType: 'json',
  success: function (data) {
    var names = data
    $('#cand').html(data);
  }
});

或者你可以使用parseJSON：

var parsedJson = $.parseJSON(jsonToBeParsed);

接下来，您可以按如下迭代：

var j ='[{"id":"1","name":"test1"},{"id":"2","name":"test2"},{"id":"3","name":"test3"},{"id":"4","name":"test4"},{"id":"5","name":"test5"}]';

通过使用$().each：

var json = $.parseJSON(j);
$(json).each(function (i, val) {
  $.each(val, function (k, v) {
    console.log(k + " : " + v);
  });
}); 

JSFiddle

- Rafay

---

我的JSON数据是{"0":{"level1":"done","level2":"done","level3":"no"}}，我该如何将其提取到每个变量中？我尝试使用$.each方法，但是返回未定义的变量level1 = ele[0].level1;。 - 151291

@151291 这不是一个正确的提问方式，无论如何这里是你的JSON的fiddle链接：http://jsfiddle.net/fyxZt/1738/。请注意数组表示法`json[0]`。 - Rafay

谢谢。非常有帮助的答案。如何获取数据库表中指定列的值？ - PHPFan

@PHPFan 你是指如何查询数据库表吗？请提供更多信息，我建议您提出一个新问题，并包含必要的细节。 - Rafay

例如，在这个问题中，如果我只想获取名称值，可以使用@Rafay的示例。 - PHPFan

Answer 3

尝试以下代码，在我的项目中可以正常工作：

//start ajax request
$.ajax({
    url: "data.json",
    //force to handle it as text
    dataType: "text",
    success: function(data) {

        //data downloaded so we call parseJSON function 
        //and pass downloaded data
        var json = $.parseJSON(data);
        //now json variable contains data in json format
        //let's display a few items
        for (var i=0;i<json.length;++i)
        {
            $('#results').append('<div class="name">'+json[i].name+'</>');
        }
    }
});

- Sarabhaiah Polakam

Answer 4

 $(document).ready(function () {
    $.ajax({ 
        url: '/functions.php', 
        type: 'GET',
        data: { get_param: 'value' }, 
        success: function (data) { 
         for (var i=0;i<data.length;++i)
         {
         $('#cand').append('<div class="name">data[i].name</>');
         }
        }
    });
});

- Mohammed Abdelrasoul

Answer 5

好的，我遇到了相同的问题，并通过从[{"key":"value"}]中删除[]解决了这个问题:

1. 在你的php文件中，请确保您像这样打印：

echo json_encode(array_shift($your_variable));

在您的成功函数中执行以下操作：

 success: function (data) {
    var result = $.parseJSON(data);
      ('.yourclass').append(result['your_key1']);
      ('.yourclass').append(result['your_key2']);
       ..
    }

如果您需要，还可以进行循环。

- elaz

Answer 6

请使用这个代码。

     $.ajax({

            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Your URL",
            data: "{}",
            dataType: "json",
            success: function (data) {
                alert(data);
            },
            error: function (result) {
                alert("Error");
            }
        });

- Shivam Srivastava

Answer 7

我同意以上所有解决方案，但要指出这个问题的根本原因是，所有上述代码中的主要角色扮演者是这行代码：

dataType:'json'

如果您忽略了这行代码（可选），从服务器返回的数据会被视为完整长度字符串（默认返回类型）。添加此行代码可以告知jQuery将可能的json字符串转换为json对象。

如果需要期望json数据对象，则任何jQuery ajax调用都应指定此行。

- justnajm

Answer 8

var jsonP = "person" : [ { "id" : "1", "name" : "test1" },
  { "id" : "2", "name" : "test2" },
  { "id" : "3", "name" : "test3" },
  { "id" : "4", "name" : "test4" },
  { "id" : "5", "name" : "test5" } ];

var cand = document.getElementById("cand");
var json_arr = [];
$.each(jsonP.person,function(key,value){
    json_arr.push(key+' . '+value.name  + '<br>');
    cand.innerHTML = json_arr;
});

<div id="cand">
</div>

- Servesh Mishra

Answer 9

JSON数据

data = {"clo":[{"fin":"auto"},{"fin":"robot"},{"fin":"fail"}]}

当检索数据时

$.ajax({
  //type
  //url
  //data
  dataType:'json'
}).done(function( data ) {
var i = data.clo.length; while(i--){
$('#el').append('<p>'+data.clo[i].fin+'</>');
}
});

- Guspan Tanadi

Answer 10

以下是如何在JavaScript中完成此操作，这是一种非常有效的方法!

let data = '{ "name": "mark"}'
let object = JSON.parse(data);
console.log(object.name);

这将打印mark

- Supreme Gang Certified Member

---

它帮助了我很多，非常感谢。 - Nagaraju Kasa