JS静态刷新
首先是JSP页面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/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>-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);}}
不懂回调函数可以看看这个技术博客，感觉讲解的比较清楚 /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':'-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':'-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();}
Jquery案例
Jsp页面代码
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/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")@ResponseBodypublic 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;}}
因为是测试，所以上面的数据是直接写入的，具体实际使用直接用数据库中查询出来的数据就好
