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

Posted 2023-02-15

【中文标题】如何使用 jQuery / JavaScript 解析 JSON 数据？

【英文标题】：How to parse JSON data with jQuery / JavaScript?

【发布时间】：2021-11-05 23:10:20

【问题描述】：

我有一个 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 中？

【参考方案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 函数发送任何东西吗？

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

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

我的 json 数据是 "0":"level1":"done","level2":"done","level3":"no" 如何将其提取到每个变量中？我尝试使用$.each 方法，但返回 undefined var level1 = ele[0].level1;

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

【参考方案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 方法，但返回未定义的变量level1 = ele[0].level1;

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

谢谢。有帮助的答案。如何在 db 表中获取指定的列值？

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

@Rafay 例如在这个问题中，如果我只想获取名称值

【参考方案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( 
        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</>');
         
        
    );
);

【参考方案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"] 中删除 [] 来解决它：

在您的 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']);
       ..
    

如果你愿意，你也可以循环播放它

【参考方案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】：

以下是您在 javascript 中的操作方法，这是一种非常有效的方法！

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

这将打印标记

【讨论】：

对我帮助很大，非常感谢

【参考方案11】：

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