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>
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>