Ajax之追加到表格

来源：互联网发布：mac暴雪战网客户端编辑：程序博客网时间：2024/05/22 07:50

追加到表格.html

    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">    <title>Document</title>    </head>    <body>        <table width="500" border="1">            <tr>                <th>姓名               <th>年龄               <th>性别           </tr>        </table>    <button>点击    <script src="ajax3.0-min.js">    <script>    // 需求：当点击button按钮的时候，获取服务器的数据，并追击到table表格中    // 1.获取table表格        var table = document.getElementsByTagName('table')[0];        var btn = document.getElementsByTagName('button')[0];    // 2.点击事件        btn.onclick = function() {        // ajax获取数据:是一个对象，需要在Ajax()函数传递"JSON"的参数，约束了msg是对象类型的数据        Ajax('JSON').get('2.json', function(msg) {            console.log(msg);            // console.log(typeof msg);            var str = '';            for (var i = 0; i < msg.length; i++) {                str += '';                str += '' + msg[i]['username'] + '';                str += '' + msg[i]['age'] + '';                str += '' + msg[i]['sex'] + '';                str += '';            }            // 将拼装的字符串写入到table中            table.innerHTML += str;        })    }    </script></body></html>

2.json

[    { "username": "张三", "age": 30, "sex": "\u7537" },    { "username": "\u7545\u7545", "age": 28, "sex": "\u5973" },    { "username": "\u5cf0\u54e5", "age": 36, "sex": "\u7537" },    { "username": "\u5cf0\u54e5\u5ac2\u5b50", "age": 44, "sex": "\u5973" }]

0 0