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

我有一个AJAX调用，返回的JSON是这样的： >
如何遍历此数据并将每个名称放在div中？

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

成功。谢谢。我是否必须发送json pr我可以从php函数发送任何内容？

–爱国牛
2012年1月21日，9：14

@Patrioticcow，您也可以发送JSON。在这种情况下，您需要在$ .ajax函数中设置contentType：'application / json'设置，然后JSON序列化data参数，例如：data：JSON.stringify（{get_param：'value'}）。然后在您的php脚本中，您需要json解码以取回原始对象。

–达琳·迪米特洛夫（Darin Dimitrov）
2012年1月21日，9：16

这是什么“完成：功能”？那和“成功”一样吗？我没有在文档中看到它。

–瓶Butkus
2014-09-30 22:34

我的json数据是{“ 0”：{“ level1”：“ done”，“ level2”：“ done”，“ level3”：“ no”}}}如何将其提取到每个变量中？我尝试使用$ .each方法这样做，但返回未定义的var level1 = ele [0] .level1;

–151151
16-2-5在5:53

@DarinDimitrov如何在轮播引导程序中显示这些数据？

–阿比丁·朱尼奇
19-09-23在13:25

#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

我的json数据是{“ 0”：{“ level1”：“ done”，“ level2”：“ done”，“ level3”：“ no”}}}如何将其提取到每个变量中？我尝试使用$ .each方法这样做，但返回未定义的var level1 = ele [0] .level1;

–151151
16年2月5日在5:55

@ 151291那不是问您问题的正确方法，无论如何，这里是json的小提琴jsfiddle.net/fyxZt/1738。注意数组符号json [0]

–拉斐
16年2月6日在12:05

谢谢。有用的答案。如何获取数据库表中的特定列值？

– PHPFan
19年8月3日在9:51

@PHPFan您的意思是如何查询数据库表？请提供更多信息，我建议您提出一个新问题，包括必要的详细信息。

–拉斐
19年8月3日在21:31

例如，如果我只想获取名称值，则在此问题中使用@Rafay

– PHPFan
19年8月4日在4:39

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

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

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

#6 楼

好的，我遇到了同样的问题，我通过从[]中删除[{"key":"value"}]来解决此问题： br />

echo json_encode(array_shift($your_variable));

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

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

，如果您想
也可以循环播放

#7 楼

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

dataType:'json'

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

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

#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>

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

#10 楼

$.ajax({
  url: '//.xml',
  dataType: 'xml',
  success: onTrue,
  error: function (err) {
      console.error('Error: ', err);
  }
});

$('a').each(function () {
  $(this).click(function (e) {
      var l = e.target.text;
      //array.sort(sorteerOp(l));
      //functionToAdaptHtml();
  });
});

编程黑洞网