基于JQuery和DWR实现异步数据传递
后台我用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插件实现跨域异步上传文件功能，包括了基于Jquery插件实现跨域异步上传文件功能的使用技巧和注意事项，需要的朋友参考一下 先说明白 这个跨域异步上传功能我们借助了Jquery.form插件，它在异步表单方面很有成效，而跨域我们会在HTTP响应头上添加access-control-allow-method，当然这个头标记只有IE10，火狐和谷歌上支持，对于IE10以下的
-
本文向大家介绍jQuery实现异步获取json数据的2种方式，包括了jQuery实现异步获取json数据的2种方式的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现异步获取json数据的2种方式，在web程序开发中非常具有实用价值。分享给大家供大家参考之用。具体方法如下： 通常来说，jQuery异步获取json数据有2种方式，一个是$.getJSON方法，一个是$.ajax方
-
本文向大家介绍基于jQuery实现弹幕APP，包括了基于jQuery实现弹幕APP的使用技巧和注意事项，需要的朋友参考一下 今天闲着无聊，写了个弹幕APP，主要实现以下几个功能： 1.点击“弹幕发射”或回车可以输出弹幕到弹幕墙上。 2.弹幕的运行轨迹是从弹幕墙的最右边到最左边，Y轴的数值在弹幕墙的高度内随机，颜色HEX随机，速度随机。 3.右侧的表格可以储存弹幕内容以及弹幕的发射时间，越靠近现在的
-
本文向大家介绍基于django和dropzone.js实现上传文件，包括了基于django和dropzone.js实现上传文件的使用技巧和注意事项，需要的朋友参考一下 1、dropzone.js http://www.dropzonejs.com/ dropzone.js是一个可预览\可定制化的文件拖拽上传，实现AJAX异步上传文件的工具 2、dropzone.js前端界面上传方式 官网下载 并且
-
本文向大家介绍基于jQuery实现数字滚动效果，包括了基于jQuery实现数字滚动效果的使用技巧和注意事项，需要的朋友参考一下 滚动方向：上下 源代码下载 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
jQuery异步上传, 其使用原理是iframe. 特点: 小巧 简单 使用方法 1 在页面引入jquery.upload js 2 代码 // upload_img 为一个按钮, 点击时选择文件上传$("#upload_img").click(function() { // 上传方法 $.upload({ // 上传地址