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")@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;}
}

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

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

ajax异步提交局部刷新页面,ajax异步请求定时刷新局部页面
用户提问 $(document).ready(function () { $.ajax({ type: 'GET', url:'http://localhost:8080/SSM/user/findR ...
ajax右侧刷新加载jsp,jsp实现局部刷新页面、异步加载页面的方法
jsp实现局部刷新页面.异步加载页面的方法局部刷新页面.异步加载页面方案: 1.在jsp页面需要刷新的地方增加一个控件 2.新建一个jsp页面:aaa.jsp(用来放置需要刷新的内容) 3.将id为 ...
a标签不跳转+ajax异步请求+局部刷新页面
a标签不跳转 <td style="text-align:center;"><a href="" style="color: #2d ...
使用AJAX局部刷新页面
使用AJAX局部刷新页面局部刷新页面也就是定时性获取数据库信息,此方法也适用于刷新表格,不过表格刷新时会进行闪烁,根据自己代码决定是否使用此方式刷新表格数据(侵删). 方法一 setInterval ...
利用jquery load 局部刷新数据
<base><style>BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: ...
ORM中的事务和锁、Ajax异步请求和局部刷新、Ajax文件上传、日期时间类型的Json、多表查询图书系统
一.ORM中的事务和锁事务事务要确保原子性 """ 事务ACID原子性:不可分隔的最小单位一致性:跟原子性是相辅相成隔离性:事务之间相互不干扰持久性:事务一旦确认永久 ...
ajax局部刷新页面
1.Ajax应用程序的优势在于: 1. 通过异步模式,提升了用户体验 2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3. Ajax引擎在客户端运行,承担了一部分本来由服务 ...
第九章php与数据交互,利用ajax实现与php数据交互，并局部刷新页面
本文主要有以下几个要点: ajax的基本语法结构 jQuery基本语法 json数组基本结构 ajax回调函数中的json数组解析及局部刷新 php基本语法 ajax与php的对接 php中post数 ...
html js更新数据不刷新页面,用javascript实现无刷新更新数据
程序设计中会经常碰到一种情况,就是事先无法得知用户会需要哪些数据,必须根据用户选择后再从服务器重新提取数据后反馈给用户. window.clearInterval与window.setInterva ...
快速刷新页面ajax出现404,react使用BrowserRouter打包后，刷新页面出现404
nginx nginx.conf server { listen 80 default_server; server_name /var/www/example.com; root /var/www/ ...

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

JS静态刷新

Jquery案例

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

最新文章

热门文章