您的位置：首页 > 编程技术 > js  >  基于JQuery和DWR实现异步数据传递

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

 更新时间：2020年10月16日 13:37  点击：1815

后台我用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>

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

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

[!--infotagslink--]

相关文章

  • jquery实现加载更多"转圈圈"效果(示例代码)

    这篇文章主要介绍了jquery实现加载更多"转圈圈"效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-11-10

  • C#连接SQL数据库和查询数据功能的操作技巧

    本文给大家分享C#连接SQL数据库和查询数据功能的操作技巧，本文通过图文并茂的形式给大家介绍的非常详细，需要的朋友参考下吧...2021-05-17

  • php简单数据操作的实例

    最基础的对数据的增加删除修改操作实例，菜鸟们收了吧...2013-09-26

  • 自己动手写的jquery分页控件(非常简单实用)

    最近接了一个项目，其中有需求要用到jquery分页控件，上网也找到了需要分页控件，各种写法各种用法，都是很复杂，最终决定自己动手写一个jquery分页控件，全当是练练手了。写的不好，还请见谅，本分页控件在chrome测试过，其他的兼容性...2015-10-30

  • 解决Mybatis 大数据量的批量insert问题

    这篇文章主要介绍了解决Mybatis 大数据量的批量insert问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-09

  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15

  • Antd-vue Table组件添加Click事件,实现点击某行数据教程

    这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17

  • 详解如何清理redis集群的所有数据

    这篇文章主要介绍了详解如何清理redis集群的所有数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-18

  • jQuery实现非常实用漂亮的select下拉菜单选择效果

    本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考，具体如下：先来看如下运行效果截图：在线演示地址如下：http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08

  • vue 获取到数据但却渲染不到页面上的解决方法

    这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-19

  • jquery实现的伪分页效果代码

    本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考，具体如下：这里介绍的jquery伪分页效果，在火狐下表现完美，IE全系列下有些问题，引入了jQuery1.7.2插件，代码里有丰富的注释，相信对学习jQuery有不小的帮助，期...2015-10-30

  • mybatis-plus 处理大数据插入太慢的解决

    这篇文章主要介绍了mybatis-plus 处理大数据插入太慢的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-12-18

  • php把读取xml 文档并转换成json数据代码

    在php中解析xml文档用专门的函数domdocument来处理，把json在php中也有相关的处理函数，我们要把数据xml 数据存到一个数据再用json_encode直接换成json数据就OK了。...2016-11-25

  • Jquery Ajax Error 调试错误的技巧

    JQuery使我们在开发Ajax应用程序的时候提高了效率，减少了许多兼容性问题，我们在Ajax项目中，遇到ajax异步获取数据出错怎么办，我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24

  • jQuery页面加载初始化常用的三种方法

    当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07

  • jQuery 2.0.3 源码分析之core（一）整体架构

    拜读一个开源框架，最想学到的就是设计的思想和实现的技巧。废话不多说，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

  • postgresql数据添加两个字段联合唯一的操作

    这篇文章主要介绍了postgresql数据添加两个字段联合唯一的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-04

  • jQuery实现切换页面过渡动画效果

    直接为大家介绍制作过程，希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素，div.cd-cover-layer用于制作页面切换时的遮罩层，div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30

  • jquery获取div距离窗口和父级dv的距离示例

    jquery中jquery.offset().top / left用于获取div距离窗口的距离，jquery.position().top / left 用于获取距离父级div的距离（必须是绝对定位的div）。 （1）先介绍jquery.offset().top / left css： 复制代码 代码如下: *{ mar...2013-10-13