怎么把后台传过来的Json拼成table 用Jquery ajax()
页面上的表格定义:
<table id="tableId"></table> js中的代码:
var $parent0 = $('#tableId);//获取页面上id为tableId的table对象 $parent0.append($("<tr><td>姓名</td><td>年龄</td></tr>"));//html字符外面的$()不能少,这是jquery的 var tableStr;//定义一个用来拼表格内容的字符串 $.post("/getJson.action", { //ajax请求,这个地址需要返回json数据(json字符串)
varName1:$('#varId1').val(),//传递参数
varName2:$('#varId2').val()
}, function (data, textStatus){//data就是返回的json数据,textStatus表示请求返回的状态
alert(data);//可以再此看看返回的全部json数据
$.each( data , function(i, item) {//这个data是个数组,
//数组里是包含了name和age属性的对象
alert(item['name']);//item就表面每个对象,用item['name']来获取对应属性的值
alert(item['age']); //在each方法中循环地拼tr,td元素,也可以不拼单个,直接在each方法是append到table对象下
tableStr += "<tr><td>"+item['name']+"</td><td>"+item['age']+"</td</tr>"; }); $parent0.append($(tableStr));//将表格内容增加到表格里 });
怎么把后台传过来的Json拼成table 用Jquery ajax()的更多相关文章
- Echart实现多个y轴,坐标轴的个数及名称由后台传过来的json数据决定。
yAxis: function(){ var yAxis=[]; for(var i=0;i<legend1.length;i++){ var item={ name:legend1[i], t ...
- js如何解析后台传过来的json字符串
1.js如何解析后台传过来的json字符串? 注意:js是无法直接接收和使用json或者Php的数据,用的话会出现undefined,所以要转换一下. 方式一: var str = '{"r ...
- js解析后台传过来的json
java ,action public void print(String rs){ PrintWriter out; try { HttpServletResponse response = Ser ...
- 修改后台传过来的json数据中对象的属性
前言 今天在实习中遇到的一个小问题,后端传过来的一个json数据结构,但是对象中的属性名跟我需要的不一样(因为我是渲染echarts中的数据,属性名要一样) 这是后台传过来的数据: 需求是我需要把属性 ...
- ECharts动态获取后台传过来的json数据进行多个折线图的显示,折线的数据由后台传过来
ECharts 多个折线图动态获取json数据 效果图如下: 一.html部分 <p id="TwoLineChart" style="width:100%; he ...
- 处理后台传过来的json数据-显示到微信小程序的富文本里
解析数据: JSON.parse(); 获取 加密的文章内容, 将解密文章内容, 将解密后的img标签的路径换成绝对地址(服务器) 调整图片的大小,
- Json跨域请求数-Jquery Ajax请求
同步请求,async(是否异步) //同步请求,等待并接收返回的结果 var result = $.ajax({ type: "GET", url: address, async: ...
- JSON数据转换成table表格
<%@ page contentType="text/html; charset=UTF-8" %> <%@taglib uri="/struts-ta ...
- C#实现调用接口数据获取数据格式化XML、json转成Table的方法
废话不多说,直接上代码: json 格式化转DataTable: result为从接口得到的数据,格式化json的方法主要来自Newtonsoft.Json JObject joUnit = JObj ...
随机推荐
- Vue CLI Webpack 创建Vue项目
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- Prometheus Operator 教程:根据服务维度对 Prometheus 分片
原文链接:https://fuckcloudnative.io/posts/aggregate-metrics-user-prometheus-operator/ Promtheus 本身只支持单机部 ...
- next()与nextLine()的区别
abc def ghij kl mno pqr st uvw xyz 你用next(),第一次取的是abc,第二次取的是def,第三次取的是ghij 你用nextLine(),第一次取的是abc de ...
- Linux中.bashrc与.bash_profile的对比
如果你平时在命令行上花费了大量时间,那么你可能会萌生出希望定制 Shell 环境的想法.今天本文就和大家讲解该如何实现你们的这个想法.其实可以通过创建别名.向环境变量 $PATH 添加新目录或更改 S ...
- js利用canvas绘制爱心
js代码如下: var cav = document.getElementById("a").getContext("2d"); function draw(x ...
- python设计模式之修饰器模式
python设计模式之修饰器模式 无论何时我们想对一个对象添加额外的功能,都有下面这些不同的可选方法. [ ] 如果合理,可以直接将功能添加到对象所属的类(例如,添加一个新的方法) [ ] 使用组合 ...
- NodeJs+Express+SqlServer简易后台API服务搭建
首先安装nodejs 第一步 创建node项目配置package.json如下 express 使用方法可参考http://www.runoob.com/nodejs/nodejs-express-f ...
- Excel 科学计数法数值转换
问题场景 如果导出的数据文件后缀为.CSV,一般数值类型的数据超过12位后,单元格的数据就用科学计数法来表示了. 比如身份证号.较长的id,数值会超过12位,而科学计数法表示,不方便查看或操作,很多情 ...
- 上手了RabbitMQ?再来看看它的交换机(Exchange)吧
人生终将是场单人旅途,孤独之前是迷茫,孤独过后是成长. 楔子 本篇是消息队列RabbitMQ的第三弹. RabbitMQ的入门和RabbitMQ+SpringBoot的整合可以点此链接进去回顾,今天要 ...
- JDBC | 第一章: 快速开始使用JDBC连接Mysql数据库?
开始使用基于java的JDBC技术来连接mysql进行msyql数据库简单的CRUD操作 下载对应mysql驱动包 这里我创建maven项目基于maven下载 <!--mysql 驱动--> ...