基于JQuery和DWR实现异步数据传递
更新时间:2020年10月16日 13:37 点击:1819
后台我用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>
当你输入时,会去后台查询并显示一些数据,你可以使用上下键来操作,回车时自动提交数据!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
上一篇: JS实现简易图片自动轮播
下一篇: JS跨浏览器解析XML应用过程详解
相关文章
- 这篇文章主要介绍了jquery实现加载更多"转圈圈"效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-11-10
- 本文给大家分享C#连接SQL数据库和查询数据功能的操作技巧,本文通过图文并茂的形式给大家介绍的非常详细,需要的朋友参考下吧...2021-05-17
- 最基础的对数据的增加删除修改操作实例,菜鸟们收了吧...2013-09-26
- 最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性...2015-10-30
- 这篇文章主要介绍了解决Mybatis 大数据量的批量insert问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-09
- 有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了详解如何清理redis集群的所有数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-18
- 本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考,具体如下:先来看如下运行效果截图:在线演示地址如下:http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 在php中解析xml文档用专门的函数domdocument来处理,把json在php中也有相关的处理函数,我们要把数据xml 数据存到一个数据再用json_encode直接换成json数据就OK了。...2016-11-25
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
- 这篇文章主要介绍了mybatis-plus 处理大数据插入太慢的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-18
- JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
- 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07
- 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧。废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过,不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译...2014-05-31
jquery中常用的SET和GET$(”#msg”).html循环介绍
复制代码 代码如下: $(”#msg”).html(); //返回id为msg的元素节点的html内容。 $(”#msg”).html(”new content“); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $(”...2013-10-13- jquery中jquery.offset().top / left用于获取div距离窗口的距离,jquery.position().top / left 用于获取距离父级div的距离(必须是绝对定位的div)。 (1)先介绍jquery.offset().top / left css: 复制代码 代码如下: *{ mar...2013-10-13
- 这篇文章主要介绍了postgresql数据添加两个字段联合唯一的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-04
jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03