基于JQuery和DWR实现异步数据传递

时间：2021-05-25

后台我用DWR进行异步数据传递：

代码很简单，就是返回一个数组，如果需求不同可以自己修改：

package org.dwr.re;/** * 测试 返回数组 * @author 崔素强 */public class BackArray { public String[] backArr() { String[] arr = new String[] { "坚持", "就是", "胜利" }; return arr; }}

前台记得导入DWR的JS，和JQuery的JS，然后写文本框的输入事件：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>" rel="external nofollow" > <title>自动补全</title> <script type='text/javascript' src='/buquan/dwr/util.js'></script> <script type='text/javascript' src='/buquan/dwr/engine.js'></script> <script type='text/javascript' src='/buquan/dwr/interface/arr.js'></script> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> var highlightindex = -1; //高亮节点 var timeOutId; $(document).ready(function() { var wordInput = $("#keyText"); //文本框值 var wordInputOffset = wordInput.offset(); //文本框属性 //初始时层隐藏,并设置它的样式,位置 $("#auto").hide().css("border","1px black solid") .css("position","absolute") .css("top",wordInputOffset.top + wordInput.height() + 5 + "px") .css("left",wordInputOffset.left + "px") .width(wordInput.width() + 5); //文本框事件 $("#keyText").keyup(function(){ var myEvent = event || window.event; var keyCode = myEvent.keyCode; //取得按键的值 var autoNode = $("#auto"); //输入字母等的情况，包括回车，delete if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) { autoNode.html(""); var wordText=$("#keyText").val(); //当前文本框值 if (wordText != ""){ //将上一次没有完成的请求清除 clearTimeout(timeOutId); //将请求延迟 timeOutId = setTimeout(function(){ //使用DWR返回数据，暂时没有设置参数，返回一个字符串数组即可 arr.backArr(function back(data){ for(i = 0;i < data.length;i++){ var newDiv = $("<div>").attr("id",i); // 增加标识 newDiv.html(data[i]).appendTo(autoNode); //创建新的节点到原DIV元素 //鼠标移入事件 newDiv.mouseover(function(){ if(highlightindex != -1){ $("#auto").children("div").eq(highlightindex) .css("background-color","white"); } //增加一个属性 highlightindex = $(this).attr("id"); //当前设为红色 $(this).css("background-color","red"); }); //鼠标移出事件 newDiv.mouseout(function(){ //当前清除颜色 $(this).css("background-color","white"); }); //鼠标单击事件 newDiv.click(function(){ //取出高亮节点的文本内容 var comText = $("#auto").hide().children("div").eq(highlightindex).text(); highlightindex = -1; //文本框中的内容变成高亮节点的内容 $("#keyText").val(comText); }); } if (data.length > 0){ autoNode.show(); }else{ autoNode.hide(); } }); },500); //延迟处理 } else { autoNode.hide(); } highlightindex = -1; } else if (keyCode == 38 || keyCode == 40) { if (keyCode == 38) { //向上 var autoNodes = $("#auto").children("div") if (highlightindex != -1) { //如果原来存在高亮节点，则将背景色改称白色 autoNodes.eq(highlightindex).css("background-color","white"); highlightindex--; } else { highlightindex = autoNodes.length - 1; } if (highlightindex == -1) { //如果修改索引值以后index变成-1，则将索引值指向最后一个元素 highlightindex = autoNodes.length - 1; } //让现在高亮的内容变成红色 autoNodes.eq(highlightindex).css("background-color","red"); } if (keyCode == 40) { //向下 var autoNodes = $("#auto").children("div") if (highlightindex != -1) { //如果原来存在高亮节点，则将背景色改称白色 autoNodes.eq(highlightindex).css("background-color","white"); } highlightindex++; if (highlightindex == autoNodes.length) { //如果修改索引值以后index变成-1，则将索引值指向最后一个元素 highlightindex = 0; } //让现在高亮的内容变成红色 autoNodes.eq(highlightindex).css("background-color","red"); } } else if (keyCode == 13) { //下拉框有高亮内容 if (highlightindex != -1) { //取出高亮节点的文本内容 var comText = $("#auto").hide().children("div").eq(highlightindex).text(); highlightindex = -1; //文本框中的内容变成高亮节点的内容 $("#keyText").val(comText); } else { //下拉框没有高亮内容 alert("文本框中的[" + $("#keyText").val() + "]被提交了"); } } }); }); </script> </head> <body> <input type="text" id="keyText" name="keyText" width="50px" /> <div id="auto" align="left"></div> </body></html>

当你输入时，会去后台查询并显示一些数据，你可以使用上下键来操作，回车时自动提交数据！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章