JS、jquery静态（局部）刷新页面（Ajax异步）

JS静态刷新

首先是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 += "&times=" + 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();
	}

Jquery案例

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

因为是测试，所以上面的数据是直接写入的，具体实际使用直接用数据库中查询出来的数据就好

JS、jquery静态（局部）刷新页面（Ajax异步）

JS静态刷新

Jquery案例

猜你喜欢