ajax 异步发送接收数据 -- 前端遍历json数据输出

本文链接：https://blog.csdn.net/JXL9910/article/details/81052231

#前端 html 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <button id="xs" ac_id="销售">销售</button>
  <button id="js" ac_id="技术">技术</button>
  <table id="tb" border="1" style="border-collapse: collapse;width:590px;">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>角色</th>
          <th>创建时间</th>
        </tr>
        <tr>
          <th>1</th>
          <th>牛逼</th>
          <th>啥子</th>
          <th>666</th>
        </tr>
    </table>

</body>
</html>

<script>
// json数据都已经获取到了
// [{"id":"1","0":"1","name":"\u59ec\u6653\u4eae","1":"\u59ec\u6653\u4eae","role":"\u5458\u5de5","2":"\u5458\u5de5","time":"2018-07-03","3":"2018-07-03"},
// {"id":"5","0":"5","name":"\u59ec\u6653\u4eae","1":"\u59ec\u6653\u4eae","role":"\u5458\u5de5","2":"\u5458\u5de5","time":"2018-07-03","3":"2018-07-03"}]

  // 销售
    $("#xs").click(function() {
        // 友好显示
        $('#tb tr:gt(0)').remove(); //删除之前的数据
        $('#tb').append('<tr><td colspan=4 style="text-align: center;"> 请稍等。。。 </td></tr>');

        $.ajax({
            type: "post",
            dataType: "json",
            scriptCharset: "utf-8",
            url: "1.php",
            // 传递参数 id
            // attr（获取属性值）
            // data: {id : "角色"},  // 传递参数
            data: {id : $("#xs").attr("ac_id")},  
            success: function (json) {
              // console.log(json);
              // 第一种遍历输出方式
              $('#tb tr:gt(0)').remove();//删除之前的数据
              var s = "";
              // k  一条数据的键 0，1  本次测试两条数据 
              // json 接受过来的值
              for( var k in json) {  
              　s += '<tr><td style="color:red;">' + json[k].id + '</td><td>' + json[k].name + '</td><td>' + json[k].role + '</td>'
                    + '<td>' + json[k].time + '</td></tr>';  
              } 
              $('#tb').append(s);

              // 第二种遍历输出方式
              // $('#tb tr:gt(0)').remove();//删除之前的数据
              // var s = '';
              // for (var i = 0; i < json.length; i++) s += '<tr><td style="color:red;">' + json[i].id + '</td><td>' + json[i].name + '</td><td>' + json[i].role + '</td>'
              //     + '<td>' + json[i].time + '</td></tr>';
              // $('#tb').append(s);
            },
            error: function (XMLResponse) {
                alert(" 错误信息：" + XMLResponse.responseText);
            }

        });

    }); 

    // 技术
    $("#js").click(function() {
        // 友好显示
        $('#tb tr:gt(0)').remove(); //删除之前的数据
        $('#tb').append('<tr><td colspan=4 style="text-align: center;"> 请稍等。。。 </td></tr>');

      // alert($("#js").attr("ac_id"));
        $.ajax({
            type: "post", 
            dataType: "json",
            scriptCharset: "utf-8",
            url: "1.php",
            data: {id : $("#js").attr("ac_id")},  // 传递参数
            // data: {id : "销售"},  // 传递参数
            success: function (json) {
              console.log(json); 
              // 上边介绍的第二种方式 便利数据
                $('#tb tr:gt(0)').remove();//删除之前的数据
                var s = '';
                for (var i = 0; i < json.length; i++) 
                	s += '<tr><td style="color:red;">' + json[i].id + '</td><td>' + json[i].name + '</td><td>' + json[i].role + '</td>'
                    + '<td>' + json[i].time + '</td></tr>';
                $('#tb').append(s);
            },
            error: function (XMLResponse) {
                alert(" 错误信息：" + XMLResponse.responseText);
            }
        });
    }); 
</script>

#后端 php 代码

<?php 
header("Content-type: text/html; charset=utf-8"); 
$db = new PDO('mysql:host=localhost;dbname=test', 'root','root');

$info = $_POST['id'];

// var_dump($info);

$sql = $db->query("select * from `runoob_tbl` where `role` = '$info'");
$rows = $sql->fetchAll();
echo json_encode($rows);
// echo '<pre>';
// var_dump($rows[0]['name']);

 ?>

返回数据 json

[{"id":"1","0":"1","name":"\u78ca\u54e5","1":"\u78ca\u54e5","role":"\u6280\u672f","2":"\u6280\u672f","time":"2018-07-03","3":"2018-07-03"},{"id":"5","0":"5","name":"\u96f7\u54e5","1":"\u96f7\u54e5","role":"\u6280\u672f","2":"\u6280\u672f","time":"2018-07-03","3":"2018-07-03"}]

数据信息
这里写图片描述