微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ajax表格拼接遍历json数据

在前端开发中,我们经常需要使用ajax请求数据并将获取到的数据以表格形式展示在网页上。由于后台返回的数据一般是json格式的,因此需要对获取到的json数据进行遍历,拼接成表格的形式展示在页面上。

//使用ajax请求数据
$.ajax({
    type: "GET",url: "data.json",dataType: "json",success: function(data){
        //定义表头
        var table = '';

        //遍历json数据并拼接成表格形式
        $.each(data,function(index,item){
            table += '';
        });

        //关闭表格标签
        table += '
姓名 年龄 性别
'+item.name+' '+item.age+' '+item.gender+'
'; //将拼接好的表格添加页面中 $('#tableContainer').html(table); } });

ajax表格拼接遍历json数据

上述代码首先使用ajax请求获取数据,其中url参数为请求地址,dataType参数为请求数据的类型。成功后,定义一个table变量,该变量用于存储拼接好的表格数据。

然后使用$.each()方法获取到的json数据进行遍历,其中index为数据下标,item为数据对象。在遍历json数据时,拼接每一行的数据到table变量中。注意在拼接字符串时,需要使用单引号将HTML代码括起来。

最后,将拼接好的表格数据添加页面中。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐