如何用jQuery / JavaScriptparsingJSON数据？

我有一个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" } ] 

我怎样才能循环这些数据，并将每个名称放在一个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'会为你parsingjson

 $.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. 在你的成功function中做到这一点

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

也可以循环使用，如果你想

Answer 7

 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> 

Answer 8

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