#HTML中使用Ajax进行局部刷新页面，使用JS将数据发送到后台
##1.在HTML页面中使用js脚本将请求数据发送给后台servlet
- 由按钮触发事件
1 | <button id="select" onclick="queryInfos()">查询</button> |
- 由js脚本对将数据发送到后台
1 | var req = new XMLHttpRequest(); |
##2.后台获取数据进行处理，将结果返回给前台
- 后台进行处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置数据编码方式
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//设置数据类型
response.setContentType("text/plain");
//设置禁用缓存
response.setHeader("Cache-control","no-cache");
//获取从页面传递的参数
String ip = request.getParameter("ip");
String addr = request.getParameter("addr");
String time = request.getParameter("time");
String times = request.getParameter("times");
/*
* 执行操作
* */
//拼接返回的json数据
StringBuilder jsonString = new StringBuilder();
jsonString.append("{");
jsonString.append("'size':2");
jsonString.append(",'datas':[");
jsonString.append("{");
jsonString.append("'ip':'10.10.1.1',");
jsonString.append("'addr':'辽宁葫芦岛',");
jsonString.append("'time':'2016-10-24 16:00:23',");
jsonString.append("'times':'10'");
jsonString.append("}");
jsonString.append(",{");
jsonString.append("'ip':'192.168.110.111',");
jsonString.append("'addr':'辽宁沈阳',");
jsonString.append("'time':'2016-11-11 11:00:23',");
jsonString.append("'times':'14'");
jsonString.append("}");
jsonString.append("]");
jsonString.append("}");
//获取输出流
PrintWriter out = response.getWriter();
//将数据返回页面
out.write(jsonString.toString());
out.flush();
out.close();
}
##3.返回处理结果，局部刷新页面
- 对返回操作进行处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44//回调函数
function callback() {
//如果Ajax和request的状态都正确则进行操作
if (req.readyState == 4 && req.status == 200) {
//获取后台返回的数据
var response = req.responseText;
//进行对象化处理
//加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式转化为对象，而不是作为语句来执行
//由于json是以"{}"的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
var jsonobject = eval("(" + response + ")");
//获取数据的长度
var datasize = jsonobject.size;
//获取json中的数据数据
var datas = jsonobject.datas;
//删除原有的table数据
var table = document.getElementById("table");
var infos = document.getElementById("tbody");
table.removeChild(infos);
//此处必须创建tbody，否则无法加入到table中
infos = document.createElement("tbody");
//生成新的table数据元素并添加到table中
for (var i = 0; i < datas.length; i++) {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
td1.innerHTML = datas[i].ip;
td2.innerHTML = datas[i].addr;
td3.innerHTML = datas[i].time;
td4.innerHTML = datas[i].times;
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
infos.appendChild(tr);
}
table.appendChild(infos);
}
}
- HTML文件
1 | <body> |