栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

js实现将json数组显示前台table中

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

js实现将json数组显示前台table中

在最近的学习中遇到一个小问题,如何把JSON数组显示在前台的table中,经过一番借鉴和学习之后终于解决了这个问题。具体的代码如下:

前提:利用ajax获取过来的JSON字符串必须是规范的,这样才能解析正确。后台获取数据库中数据的代码省略了

1、前台JS代码(使用之前引入JQuery的js库文件)

$.ajax({
 type: "GET",
 url: "UserList.ashx?Action=List",//利用ajax请求后台的并返回值
 // data: "json",
 success: function (result) {//result为后台返回的值,是json字符串的形式
 // alert(result);
 var obj = JSON.parse(result);//解析json字符串为json对象形式
 var trStr = '';//动态拼接table
 // var html = '';
 for (var i = 0; i < obj.length; i++) {//循环遍历出json对象中的每一个数据并显示在对应的td中
 trStr += '';//拼接处规范的表格形式
 trStr += '' + obj[i].NVFID + '';//数据表的主键值
 trStr += '' + obj[i].USERCODE + '';//对应数组表的字段值
 trStr += '' + obj[i].USERNAME + '';
 trStr += '' + obj[i].USERPWD + '';
 trStr += '' + obj[i].PHonEIMEI + '';
 trStr += '' + obj[i].BMMC + '';
 
 trStr += "删除";
 trStr += '';  
 } 
 $("#tbody").html(trStr);//运用html方法将拼接的table添加到tbody中return;
 },
 error: function (error) {
 alert(error);
 }
 });

2、前台HTML代码


 
 
用户编号 用户名称 用户密码 手机号码 部门名称 操作
2 2 2 2 2

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持考高分网!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/91076.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号