Javascript 如何使用jQuery Ajax success在html上打印邮差返回的JSON数组？_Javascript_Jquery_Html_Json_Ajax

Javascript 如何使用jQuery Ajax success在html上打印邮差返回的JSON数组？

javascript jquery html json ajax

Javascript 如何使用jQuery Ajax success在html上打印邮差返回的JSON数组？,javascript,jquery,html,json,ajax,Javascript,Jquery,Html,Json,Ajax,我希望通过API[{“a”：1}，{“b”：2}，{“c”：3}，{“d”：4}]返回的JSON数组进行循环。如何将JSON键和值解析到我的html中，以便输出div只提供键和值 <body> <div id = "result" style = "color:green" ></div> <script type = "text/javascript"> $(document).ready(function()

我希望通过API

[{“a”：1}，{“b”：2}，{“c”：3}，{“d”：4}]

返回的JSON数组进行循环。如何将JSON键和值解析到我的html中，以便输出div只提供键和值

<body> 
  <div id = "result" style = "color:green" ></div>      
  <script type = "text/javascript">
      $(document).ready(function() {

          $.ajax({
              url: "http://localhost:8080/api/",
              type: 'GET',
              dataType: 'json',
              success: function(res) {
                  console.log(res);

                  //var data=$.parseJSON(res);
                  //var data = JSON.stringify(res)

                  $.each(res, function(key, value) {
                      console.log(key);
                      console.log(value);

                      var para = document.createElement("P");
                      para.innerHTML = key + ":" + value;

                      document.getElementById("result").appendChild(para);
                  })
              }
          });
      }) 
  </script> 
</body>


$（文档）.ready（函数（）{
$.ajax({
url:“http://localhost:8080/api/",
键入：“GET”，
数据类型：“json”，
成功：功能（res）{
控制台日志（res）；
//var data=$.parseJSON（res）；
//var data=JSON.stringify（res）
$.each（res、函数（键、值）{
控制台日志（键）；
console.log（值）；
var para=document.createElement（“P”）；
para.innerHTML=key+“：”+值；
文件.getElementById（“结果”）.appendChild（第段）；
})
}
});
})

当您在数组中循环时，函数将把参数作为

项

和

索引

：

$.each(array, function(index,item){});

进行二次循环并遍历对象：

$.each(object, function(key,value){});

res=[{
“a”：1
}, {
“b”：2
}, {
“c”：3
}, {
“d”：4
}]
$。每个（资源、功能（索引、项目）{
$。每个（项目、功能（键、值）{
var para=document.createElement（“P”）；
para.innerHTML=key+“：”+值；
文件.正文.附件（第6段）；
});
});
您的JSON格式是一个数组，每个键都是一个对象
[
  {"a" : 1},
  {"b" : 2},
  {"c" : 3},
  {"d" : 4}
]

这意味着当您循环遍历这些项时，键将成为数组的索引，值将成为对象
$。每个（res、函数（键、值）{
console.log（键）；//->将为0、1、2等
log（value）；//->将是{“a”：1}、{“b”：2}，等等
});

所以有两个选项，您可以更改API以返回一个带有key:value对的对象，如下所示
{
    "a" : 1,
    "b" : 2,
    "c" : 3,
    "d" : 4
}

或者，您需要在代码中添加一个额外的循环，以便可以循环对象并显示值（尽管我建议使用第一个选项）
$.ajax({
url:“http://localhost:8080/api/",
键入：“GET”，
数据类型：“json”，
成功：功能（res）{
$.each（res、函数（键、对象）{
$.each（对象、函数（键、值）{
var para=document.createElement（“P”）；
para.innerHTML=key+“：”+值；
文件.getElementById（“结果”）.appendChild（第段）；
});
});
}
});
显示console.log（res）的结果；