关于#ajax#的问题：3.能创建JSON文件，利用Ajax方法访问JSON文件同时返回数据，将返回的数据添加到表格，要求表格表头和最后一列如下图所示

使用异步数据交互方式实现页面的局部更新；利用ajax函数链接到JSON数据文件，要求使用$.get()和$.ajax(),查看两者之间的区别，其中$.get()数据输出到控制台，$.ajax()数据输出到HTML页面。

3.能创建JSON文件，利用Ajax方法访问JSON文件同时返回数据，将返回的数据添加到表格，要求表格表头和最后一列如下图所示。

img


<html>
    <head>
    <meta charset="utf-8">
    <title>加载json数据</title>
    <script type="text/javascript">
    function loadData() {
        var tbody=window.document.getElementById('tbody-result');

        var header="<tr>"+
                   "<th>姓名</th>"+
                   "<th>年龄</th>"+
                   "<th>操作</th>"+
                   "</tr>";
        tbody.innerHTML=header;
        $.ajax({
            url: "student.json",
            type: "GET",
            dataType: "json", 
            success: function(data) {
            var students=""
            rows=data.data;
            for(i in rows){
                students+="<tr><td>"+rows[i].name+"</td>"+
                              "<td>"+rows[i].age+"</td>"+
                              "<td><a href=''>修改</a><a href=''>删除</a></td></tr>";
            }
            tbody.innerHTML=(header+students)
        }
    })
    }
    </script>
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
    </head>
    <body onload="loadData()" >
            <table border="1" id="tbody-result">
            </table>
    </body>
</html>

json文件

{"data":[
    {
    "name":"张三",
    "age":"18"
    },
    {
      "name":"王五",
      "age":"15"
    }
   ]
}

交上就行了,测试通过了

img

  • 如果要使用ajax，要部署到 服务器上去，否则浏览器会因为跨域问题，不允许ajax获取本地文件【当然也可以给浏览器添加启动参数,允许读取本地文件，参考这里】
  • 使用jsonp的方式，可以绕过浏览器的限制，不过不是ajax调用方式
  • 另外我这里表单内容，采用了Handlebars模板，不需要自己拼内容，感兴趣可以到这里了解一下

效果图：

img

如果需要的话，私信我，发你demo

哪个部分有问题？建议自己动手实现一部分哦

没看到你说啥问题，把你想实现的画面和你运行的结果都截图下来