首先是JSP页面代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script src="${pageContext.request.contextPath}/js/static.js"></script>
<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>
</html>
相应的JS代码,注意上面JSP引入js的路径
var req = new XMLHttpRequest();
function queryInfos() {
//设置传送方式,对应的servlet或action路径,是否异步处理
req.open("POST", "AjaxServlet", true);
//如果设置数据传送方式为post,则必须设置请求头信息
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//设置回调函数,当前操作完成后进行的操作
req.onreadystatechange = callback;
//Ajax请求发送的数据不是表单,需要拼接数据,格式和get方式一样
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);
}
//回调函数
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);
}
}
不懂回调函数可以看看这个技术博客,感觉讲解的比较清楚 https://www.cnblogs.com/ahlx/p/5520556.html
java中的servlet代码
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");
System.out.println("ip:" + ip);
System.out.println("addr:" + addr);
System.out.println("time:" + time);
System.out.println("times:" + times);
/*
* 执行操作
* */
//拼接返回的json数据
StringBuilder jsonString = new StringBuilder();
jsonString.append("{");
jsonString.append("'size':2");
jsonString.append(",'datas':[");
jsonString.append("{");
jsonString.append("'ip':'10.10.0.0',");
jsonString.append("'addr':'湖北武汉',");
jsonString.append("'time':'2019-01-03 16:00:23',");
jsonString.append("'times':'10'");
jsonString.append("}");
jsonString.append(",{");
jsonString.append("'ip':'192.168.110.111',");
jsonString.append("'addr':'北京长安',");
jsonString.append("'time':'2018-11-12 11:00:23',");
jsonString.append("'times':'14'");
jsonString.append("}");
jsonString.append("]");
jsonString.append("}");
System.out.println(jsonString);
//获取输出流
PrintWriter out = response.getWriter();
//将数据返回页面
out.write(jsonString.toString());
out.flush();
out.close();
}
Jsp页面代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btnMessage").click(function() {
$.ajax({
type:"POST",
url:"test/json2.json",
success:function(data) {
//alert("从服务器传来的数据为" + data.bookname);
$("#msg").html("从服务器异步返回的数据变量是:"+data[0].flighname);
}
})
});
var str=""
$("#btnMessage1").click(function() {
$.ajax({
type:"POST",
url:"test/json2.json",
success:function(data) {
$.each(data,function(index,flight){
str += "<tr>" + "<td>" + flight.flighname+"</td> "+ "<td>" +flight.flightid + "</td>" + "</tr>";
});
$("#tt").html(str);
//str = ""; 不清空这个效果会明显一点,实际应该清空
}
})
})
})
</script>
</head>
<body>
<div class="bbb" id="aaa"></div>
<input type="button" value="点我一下" id="btnMessage"/>
<input type="button" value="点击我一下嘛" id="btnMessage1"/>
<div id ="msg">
</div>
<table id="tt" border="1" >
</table>
</body>
</html>
注意引入本地Jquery或者其他网址的都可以
servlet使用的是SpringMVC直接返回Json对象,直接上代码
@Controller
@RequestMapping("/test")
public class TestController {
@RequestMapping("/json2")
@ResponseBody
public List<Flight> json2() {
List<Flight> flights = new ArrayList<Flight>();
Flight flight = new Flight();
flight.setFlighname("纸短情长");
flight.setFlightid(520);
Flight flight2 = new Flight();
flight2.setFlighname("我的故事还是关于你呀");
flight2.setFlightid(1314);
flights.add(flight);
flights.add(flight2);
return flights;
}
}
因为是测试,所以上面的数据是直接写入的,具体实际使用直接用数据库中查询出来的数据就好