servlet+ajax+json字符串后台传入,前端解析并把数据循环填入表格实例
写在前面:
1、源代码来源于博客http://blog.sina.com.cn/u/2904067371 ,在此基础上对于前端代码稍作更改,把传过来的数据解析并传入表格
2、json解析,用eval()
3、写入表格 table.rows[i].cells[j].innerHTML
4、导入java中json应用的jar包(如果没有导入jar包或者包不全就不会有import net.sf.json.JSONArray;import net.sf.json.JSONObject;
JSONArray、JSONObject会报错。
)
5、测试字符串如下:{"person":[{"id":3,"name":"ss","pwd":"1234"},{"id":23,"name":"ws","pwd":"124"}]}
json jar包百度云:
http://pan.baidu.com/s/1i3GNJ9N
工程截图:
效果截图:
代码:
Person.java
package com.orilore.gb; public class Person {
public int getId() {
return id;
} public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
private int id;
private String name;
private String pwd; }
servlet json.java
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { doPost(request, response);
} public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { response.setContentType("text/xml;character=utf-8");
response.setHeader("Cache-Control", "no-cache");
try{
Person p =new Person();
p.setName("ss");
p.setId();
p.setPwd(""); Person p1 =new Person();
p1.setName("ws");
p1.setId();
p1.setPwd("");
List<Person> list =new ArrayList<Person>();
list.add(p);
list.add(p1);
try{ JSONArray json =JSONArray.fromObject(list);
JSONObject jb =new JSONObject();
jb.put("person", json);
response.getWriter().write(jb.toString());
}catch(IOException e){
e.printStackTrace();
}
}catch(Exception e){
e.printStackTrace();
} }
前端页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<input type="button" onclick="validate()" value="dsfdsafa" >
<div id="div"></div>
<table border="" style="width:300px;height:200px;" id="table">
<tr id="tr" border=""><td></td>
<td></td>
<td></td></tr> <tr border=""><td></td>
<td></td>
<td></td></tr></table>
<script type="text/javascript"> function validate(){
var div=document.getElementById("div");
var xmlhttp;
var table=document.getElementById('table'); if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState== && xmlhttp.status==){
var x=xmlhttp.responseText
div.innerHTML=x;
var sd=eval("(" + x + ")"); var arr=new Array();
var i=;
for(var a in sd.person){//获取有几个person
var count=;//计算person属性值的个数
i++;
for(var item in sd.person[a])
{ count++;
var p=sd.person[a][item];//得到属性值的内容
table.rows[i-].cells[count-].innerHTML=p;//把内容填向table表格
}
}
}
}
var url ="json";
xmlhttp.open("POST",url,true);
xmlhttp.send(); }
</script>
</body>
</html>
servlet+ajax+json字符串后台传入,前端解析并把数据循环填入表格实例的更多相关文章
- JSON字符串——后台解析系列
以前我们都是讲JSON字符串获取后,在前台进行展示.今天小编就交给大家后台解析展示数据的方法.非常方便,就以下代码: JObject obj = JObject.Parse(data); string ...
- 4. JSON字符串是如何被解析的?JsonParser了解一下
公司不是你家,领导不是你妈.本文已被 https://www.yourbatman.cn 收录,里面一并有Spring技术栈.MyBatis.JVM.中间件等小而美的专栏供以免费学习.关注公众号[BA ...
- 使用JavaScriptSerializer序列化集合、字典、数组、DataTable为JSON字符串 分类: 前端 数据格式 JSON 2014-10-30 14:08 169人阅读 评论(0) 收藏
一.JSON简介 JSON(JavaScript Object Notation,JavaScript对象表示法)是一种轻量级的数据交换格式. JSON是"名值对"的集合.结构由大 ...
- AJAX —— JSON 字符串 与 JSON 对象
一.JSON 字符串转 JSON 对象 ----> JSON.parse(JString); 1 // JSON 字符串转 JSON 对象 ----> JSON.parse(JString ...
- json数组和json字符串转换成map解析
package demo; import java.util.List;import java.util.Map;import java.util.Map.Entry; import net.sf.j ...
- ajax json struts JSP传递消息到action返回数据到JSP
ACTION package actions; import com.opensymphony.xwork2.ActionSupport; import net.sf.json.JSONObject; ...
- 使用JQuery将前端form表单数据转换为JSON字符串传递到后台处理
一般地,我们在处理表单(form表单哦)数据时,传输对象或字符串到后台,Spring MVC或SpringBoot的Controller接收时使用一个对象作为参数就可以被正常接收并封装到对象中.这种方 ...
- Web jsp开发自学——ajax+servlet+echarts+json+gson 实现ajax传输servlert和echarts的数据,可视化结果
感谢下面的博主,我学习的博客有: https://blog.csdn.net/ITBigGod/article/details/81023802 Jsp+Servlet+Echarts实现动态数据可 ...
- mysql解析json字符串相关问题
很多时候,我们需要在sql里面直接解析json字符串.这里针对mysql5.7版本的分水岭进行区分. 1.对于mysql5.7以上版本 使用mysql的内置函数JSON_EXTRACT(column, ...
随机推荐
- web推送
WEB消息推送框架 web-msg-sender是一款web长连接推送框架,采用PHPSocket.IO开发,基于WebSocket长连接通讯,如果浏览器不支持WebSocket则自动转用comet推 ...
- mvc 笔记
@{ ViewBag.Title = "主页"; } <div> 这里就是渲染Body啦.~~不需要写神马<asp:Content />,其实因为Rende ...
- Reverse Linked List II java
public static ListNode reverseBetween(ListNode head, int m, int n) { ListNode pre=head,current=head, ...
- Oracle sql语言模糊查询--like后面的通配符
关于like后面的条件,Oracle提供了四种匹配模式: 1,% :表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FR ...
- ps 网页配图设计
网站配图设计 蒙太奇 品科软件---网页页面 1橡皮擦来画两图 容合 大橡皮擦擦出来自然 2图放到一个色块中 用剪贴蒙版 3调色阶 装饰下图片 矩形工具 形状 填充 画彩条 超出本框的怎么去掉多 ...
- Android 轮询之 Service + AlarmManager+Thread (转)
android中涉及到将服务器中数据变化信息通知用户一般有两种办法,推送和轮询. 消息推送是服务端主动发消息给客户端,因为第一时间知道数据发生变化的是服务器自己,所以推送的优势是实时性高.但服务器主动 ...
- H-Index,H-Index II
1.H-Index Total Accepted: 19058 Total Submissions: 70245 Difficulty: Medium Given an array of citati ...
- python 和 c# 连接数据库 (Access)
模块pypyodbc 1.3.3下载: https://pypi.python.org/pypi/pypyodbc/ 安装:解压文件找到pypyodbc.py复制到python安装目录Lib文件夹 ...
- printf--动态指定输出格式长度
char a1[] = {'A', 'B', 'C'}; char a2[] = "world"; printf(, a1, , a2); printf("[%.*s][ ...
- python文件处理及装饰器
1.文件处理: Python处理文件的流程比较简单,大致分为以下几个: 打开文件==>处理文件==>生成新文件==>写入文件 先说怎么打开一个文件: 打开一个文件可以有多种写法,下面 ...