使用JSON API响应显示来自jQuery的文本

Question

我正在尝试显示来自json格式的api响应的文本。 我只需要新鲜的循环，尽管所有的“名称”，“电子邮件”和数字值。 类似于姓名：John电子邮件：test@gmail.com号码：998755000

但是使用下面的代码我得到了未定义的错误，如这张图片

API的Json回应

[{"id":"1","name":"John","email":"test@gmail.com","numbers":"998755000"},{"id":"6","name":"Larry","email":"test@gmail.com","numbers":"5554888700"}]

jQuery代码以显示文本

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {

            $("#driver").click(function(event){
               $.getJSON('api.php', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Email : ' + jd.email+ '</p>');
                  $('#stage').append('<p> Number: ' + jd.number+ '</p>');
               });
            });

         });
      </script>
   </head>

   <body>
      <p>Click on the button to load api.php file result:</p>
      <div id = "stage" style = "background-color:#cc0;">
         STAGE
      </div>
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Answer 1

由于您的请求返回了json对象数组。 您需要使用forEach迭代结果。

     $("#driver").click(function(event){
           $.getJSON('api.php', function(data) {
              data.forEach(function(jd) {
                $('#stage').append('<p> Name: ' + jd.name + '</p>');
                $('#stage').append('<p>Email : ' + jd.email+ '</p>');
                $('#stage').append('<p> Number: ' + jd.number+ '</p>');
              });
           });
        });

Answer 2

 $(document).ready(function() { $("#driver").click(function(event){ $.getJSON('api.php', function(data) { var newHTML = ''; if (data && data.push) { //exists and it is an array newHTML = data.map(function(jd){ return '<p> Name: '+ jd.name +'</p>'+ '<p>Email : '+ jd.email +'</p>'+ '<p> Number: '+ jd.numbers +'</p>'; }).join(''); } $('#stage').html(newHTML); }); }); });

使用map，我们可以遍历结果并生成所需的标记。 首先，这样做使我们可以在舞台上执行单个html（），因此仅发生一次页面重绘，从而提高了每个段落的重绘性能。

Answer 3

这是因为api返回一个数组。

$('#driver').click(function(event) {
  $.getJSON('api.php', function(jd) {

    console.log(jd); // add this and check your browser's console

    $('#stage').html('<p> Name: ' + jd.name + '</p>');
    $('#stage').append('<p>Email : ' + jd.email + '</p>');
    $('#stage').append('<p> Number: ' + jd.number + '</p>');
  });
});

Answer 4

看来您正在接收json数组。 您需要遍历数组，这是一个基本示例。

jd.map(function(item, i){
 $('#stage').html('<p> Name: ' + item.name + '</p>');
                  $('#stage').append('<p>Email : ' + item.email+ '</p>');
                  $('#stage').append('<p> Number: ' + item.number+ '</p>');

});

这是地图功能的更详细描述https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map?v=control

使用JSON API响应显示来自jQuery的文本

问题描述

4 个解决方案

解决方案1
2 2017-05-23 18:18:55

解决方案2
2 已采纳 2017-05-23 18:29:33

解决方案3
0 2017-05-23 18:18:49

解决方案4
0 2017-05-23 18:18:55

使用JSON API响应显示来自jQuery的文本

问题描述

4 个解决方案

解决方案1 2 2017-05-23 18:18:55

解决方案2 2 已采纳 2017-05-23 18:29:33

解决方案3 0 2017-05-23 18:18:49

解决方案4 0 2017-05-23 18:18:55

解决方案1
2 2017-05-23 18:18:55

解决方案2
2 已采纳 2017-05-23 18:29:33

解决方案3
0 2017-05-23 18:18:49

解决方案4
0 2017-05-23 18:18:55