HTML中使用Ajax进行局部刷新页面
来源:互联网 发布:戏剧打击乐器软件下载 编辑:程序博客网 时间:2024/06/08 04:42
HTML中使用Ajax进行局部刷新页面,使用JS将数据发送到后台
1.在HTML页面中使用js脚本将请求数据发送给后台servlet
- 由按钮触发事件
<button id="select" onclick="queryInfos()">查询</button>
- 由js脚本对将数据发送到后台
var req = new XMLHttpRequest(); function queryInfos() { //设置传送方式,对应的servlet或action路径,是否异步处理 req.open("POST", "/info/queryinfos", 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); }
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(); }
3.返回处理结果,局部刷新页面
- 对返回操作进行处理
//回调函数 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); } }
- HTML文件
<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>
效果演示
源码下载
0 0
- HTML中使用Ajax进行局部刷新页面
- HTML中使用Ajax进行局部刷新页面
- ajax页面局部刷新
- HTML页面局部刷新
- HTML页面局部刷新
- .net中使用Ajax做到局部刷新
- Ajax 实现页面局部刷新
- Ajax实现页面局部刷新
- Html 页面 局部刷新方法
- jquery通过ajax在jsp中局部刷新页面
- struts也可以使用ajax异步调用页面局部刷新
- 了解使用 ASP.NET AJAX 进行局部页面更新
- 了解使用 ASP.NET AJAX 进行局部页面更新(一)
- Ajax:如何运用updatepanle进行局部刷新
- 利用ajax实现页面的局部刷新
- 利用Ajax实现页面局部刷新
- 利用Ajax实现页面局部刷新
- JS AJAX实现页面局部刷新~~~~
- Java基础复习---数组
- zz
- EAX、ECX、EDX、EBX寄存器的作用
- sublime text 3搭建/配置C++编译环境
- Android 存储:Internal Storage的用法以及与External storage 的区别
- HTML中使用Ajax进行局部刷新页面
- 最优矩阵链乘(动态规划dp)POJ 1651 Multiplication Puzzle
- 大数据Spark “蘑菇云”行动第58课: 广告点击广告累计点击数分析与实现
- 求两个整数的最大公约数
- Hello World!
- 最简单的基于FFmpeg的移动端例子:Android 视频解码器-单个库版
- FastDFS配置文件操作说明
- OWASP安全编码规范快速参考的术语
- Swift---一门智能型的编程语言