Posted in jQuery onOctober 16, 2020
后台我用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>
当你输入时，会去后台查询并显示一些数据，你可以使用上下键来操作，回车时自动提交数据！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。
基于JQuery和DWR实现异步数据传递
- Author -
cuisuqiang声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@