HTML中使用Ajax进行局部刷新页面,使用JS将数据发送到后台
1.在HTML页面中使用js脚本将请求数据发送给后台servlet
<button id="select" onclick="queryInfos()">查询</button>
var req = new XMLHttpRequest();
function queryInfos() {
req.open("POST", "/info/queryinfos", true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.onreadystatechange = callback;
var reqData = "ip=" + document.getElementById("ip").value;
reqData += "&addr=" + document.getElementById("addr").value;
reqData += "&time=" + document.getElementById("time").value;
reqData += "×=" + document.getElementById("times").value;
req.send(reqData);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
2.后台获取数据进行处理,将结果返回给前台
protected 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()
}
- 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
- 51
- 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
- 51
3.返回处理结果,局部刷新页面
function callback() {
if (req.readyState == 4 && req.status == 200) {
var response = req.responseText;
var jsonobject = eval("(" + response + ")");
var datasize = jsonobject.size;
var datas = jsonobject.datas;
var table = document.getElementById("table");
var infos = document.getElementById("tbody");
table.removeChild(infos);
infos = document.createElement("tbody");
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);
}
}
- 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
- 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
<body>
<div class="title">
<h1>Ajax异步查询,局部刷新页面</h1>
</div>
<div>
<table class="select">
<tr>
<td class="td">IP:<input type="text" id="ip" name="ip" class="input"></td>
<td class="td">地址:<input type="text" id="addr" name="addr" class="input"></td>
<td class="td">时间:<input type="text" id="time" name="time" class="input"></td>
<td class="td">次数:<input type="text" id="times" name="times" class="input"></td>
<td class="td"> <button id="select" onclick="queryInfos()">查询</button></td>
</tr>
</table>
</div>
<table id="table" class="table" cellpadding="0" cellspacing="0" border="1">
<tr>
<td class="td">登录ip</td>
<td class="td">登录地址</td>
<td class="td">最后一次登录时间</td>
<td class="td">登录次数</td>
</tr>
<tr>
<td class="black" colspan="4"></td>
</tr>
<tbody id="tbody">
<tr id="infos">
<td>127.0.0.1</td>
<td>辽宁大连</td>
<td>2016-10-24 14:47:01</td>
<td>123</td>
</tr>
</tbody>
</table>
</body>
- 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
- 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
下载源码