JSON

JSON数据

JSON并不是现在才有的,而是现在才提出这个概念。之前就用这种方式来保存传递数据.
JSON – JavaScript Object Navigation – Java对象导航语言。
JSOn串即是文本也是对象。本质是一个文本。

服务器是怎么返回JSON-文本

第一步:开发JSONServlet:
public class JsonServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

//查询数据库的所有学生
Random rand = new Random();
int r = rand.nextInt(20);
List<Stud> list = new ArrayList<Stud>();
for(int i=1;i<=r;i++){
Stud s = new Stud("IDS"+i,"张三"+i,i);
list.add(s);
}
//查询完成
//第二步:将list<Stud>转成[{..}..]
String json = "[";
for(Stud s:list){
if(json.equals("[")){
json+="{\"name\":\""+s.getName()+"\",\"age\":"+s.getAge()+",\"id\":\""+s.getId()+"\"}";
}else{
json+=",{\"name\":\""+s.getName()+"\",\"age\":"+s.getAge()+",\"id\":\""+s.getId()+"\"}";
}
}
json+="]";//json就是文本,所以直接返回html
response.setContentType("text/plain;charset=UTF-8");
response.getWriter().print(json);
}
}

第二步:开发页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="<c:url value='/js/ajax.js'/>"></script>
<style type="text/css">
table {
border: 1px solid black;
border-collapse: collapse;
width: 400px;
}

table td {
border: 1px solid black;
}
</style>
</head>
<body>
<button id="jss" οnclick="_test();">JSON查询</button>
<br />
<table id="tb">
<tr>
<td>ID</td>
<td>Name</td>
<td>AGE</td>
</tr>
</table>
</body>
<script type="text/javascript">
function _test() {
//声明url
var url = "<c:url value='/JsonServlet'/>";
xhr.open("GET", url);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
//获取文本
var json = xhr.responseText;
//将json串转成json对象
json = eval("(" + json + ")");
for ( var i = 0; i < json.length; i++) {
//获取数据
var id = json[i].id;
var name = json[i].name;
var age = json[i].age;
//判断是否是ie
if (document.all) {
var tb = document.getElementById("tb");
var tr = tb.insertRow();
var td = tr.insertCell();
td.innerHTML = id;
var td = tr.insertCell();
td.innerHTML = name;
var td = tr.insertCell();
td.innerHTML = age;
} else {
//写入table
var tb = document.getElementById("tb");//获取table
var tr = document.createElement("TR");//创建一个tr
var td = document.createElement("TD");//创建一个TD
td.innerHTML = id;
tr.appendChild(td);
var td = document.createElement("TD");
td.innerHTML = name;
tr.appendChild(td);
var td = document.createElement("TD");
td.innerHTML = age;
tr.appendChild(td);
tb.appendChild(tr);//加入tr
}
}
}
}
};
xhr.send();
}
</script>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值