如何使用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);
        }
    });
});

在#canddiv 里面我会得到:

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

如何遍历此数据并将每个名称放在div中？

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
        }));
    });
});

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);
  });
}); 

http://jsfiddle.net/fyxZt/4/

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+'</>');
        }
    }
});

Answer 4

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

Answer 5

使用该代码。

     $.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");
            }
        });

Answer 6

好的，我有同样的问题，我通过[]从中删除来解决此问题[{"key":"value"}]：

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

echo json_encode(array_shift($your_variable));

2. 在您的成功功能中执行此操作

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

也可以循环播放

Answer 7

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

dataType:'json'

当您错过此行（可选）时，将从服务器返回的数据视为全长字符串（这是默认返回类型）。添加此行代码将通知jQuery将可能的json字符串转换为json对象。

如果需要json数据对象，则所有jQuery ajax调用都应指定此行。