基于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>

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

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

赞 (0)

相关推荐

  • java并发编程专题（七）----（JUC）ReadWriteLock的用法

    前面我们已经分析过JUC包里面的Lock锁,ReentrantLock锁和semaphore信号量机制.Lock锁实现了比synchronized更灵活的锁机制,Reentrantlock是Lock的实现类,是一种可重入锁,都是每次只有一次线程对资源进行处理:semaphore实现了多个线程同时对一个资源的访问:今天我们要讲的ReadWriteLock锁将实现另外一种很重要的功能:读写分离锁. 假设你的程序中涉及到对一些共享资源的读和写操作,且写操作没有读操作那么频繁.在没有写操作的时候,两个线

  • PipedWriter和PipedReader源码分析_动力节点Java学院整理

    PipedWriter和PipedReader源码分析 1. PipedWriter 源码(基于jdk1.7.40)  package java.io; public class PipedWriter extends Writer { // 与PipedWriter通信的PipedReader对象 private PipedReader sink; // PipedWriter的关闭标记 private boolean closed = false; // 构造函数,指定配对的PipedRea

  • Spring Boot启动过程（六）之内嵌Tomcat中StandardHost、StandardContext和StandardWrapper的启动教程详解

    Spring Boot启动过程（六）之内嵌Tomcat中StandardHost、StandardContext和StandardWrapper的启动教程详解

    StandardEngine[Tomcat].StandardHost[localhost]的启动与StandardEngine不在同一个线程中,它的start: // Start our child containers, if any Container children[] = findChildren(); List<Future<Void>> results = new ArrayList<>(); for (int i = 0; i < childre

  • Java多线程 ReentrantReadWriteLock原理及实例详解

    读写锁ReentrantReadWriteLock概述 读写锁ReentrantReadWriteLock,使用它比ReentrantLock效率更高. 读写锁表示两个锁,一个是读操作相关的锁,称为共享锁:另一个是写操作相关的锁,称为排他锁. 1.读和读之间不互斥,因为读操作不会有线程安全问题 2.写和写之间互斥,避免一个写操作影响另外一个写操作,引发线程安全问题 3.读和写之间互斥,避免读操作的时候写操作修改了内容,引发线程安全问题 多个Thread可以同时进行读取操作,但是同一时刻只允许一个

  • DWR异常情况处理常见方法解析

    在本次项目中,由于时间紧张直接使用DWR做Ajax请求!要求的是动态展示,那就需要使用DWR轮询请求,但是需要做异常情况下的一些处理! 特别是DWR在遇到异常后,后台不报错,前台也只提示一个 Error !如果是轮询的话,那么就一直弹出 Error ,那谁收到了呀! 对于DWR异常的处理,网上一大片都是这样说的,在DWR配置中增加一个转换器,将异常转换为一般异常,这样在前台就不是提示 Error,而是提示具体的错误!想着这样也可以接受,所以我记一下是怎么配置的. 很简单,在dwr.xml中增加一

  • Java 中的 BufferedWriter 介绍_动力节点Java学院整理

    BufferedWriter 介绍 BufferedWriter 是缓冲字符输出流.它继承于Writer. BufferedWriter 的作用是为其他字符输出流添加一些缓冲功能. BufferedWriter 函数列表  // 构造函数 BufferedWriter(Writer out) BufferedWriter(Writer out, int sz) void close() // 关闭此流,但要先刷新它. void flush() // 刷新该流的缓冲. void newLine()

  • DWR中各种java方法的调用

    DWR是一个框架,简单的说就是能够在javascript直接调用java方法,而不必去写一大堆的javascript代码.它的实现是基于ajax的,可以实现无刷新效果. 网上有不少DWR的例子,但大都只是某种方法的调用,本文只在使用层面上介绍DWR,并不涉更多的技术与设计,其目的是让初学者能够很快的学会各种java方法在javascript中是如何调用的. 一.dwr配置篇之web.xml 1.最小配 <servlet> <servlet-name>dwr-invoker</

  • Java DWR内存泄漏问题解决方案

    机器跑了一晚上,发现有崩溃现象,由于页面内有动态绘图功能,我怀疑是绘图原因,但是今天上午有人提醒我才想到,是不是间隔调用时DWR产生了内存泄漏问题? 网上查了一下貌似大家都在讨论这个问题,之前我也挺老手说过DWR有内存问题,可是没有遇到过.原来DWR在间隔调用这种情况下会有问题! 按照大家的说法,修改engine.js配置文件来解决问题,目前我也修改了一下,修改方法如下: 在 dwr.engine._sendData = function(batch) {} 内有,这样几行代码: // Get

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

    后台我用DWR进行异步数据传递: 代码很简单,就是返回一个数组,如果需求不同可以自己修改: package org.dwr.re; /** * 测试 返回数组 * @author 崔素强 */ public class BackArray { public String[] backArr() { String[] arr = new String[] { "坚持", "就是", "胜利" }; return arr; } } 前台记得导入DWR

  • php基于jquery的ajax技术传递json数据简单实例

    本文实例讲述了php基于jquery的ajax技术传递json数据简单实现方法.分享给大家供大家参考,具体如下: html页面: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.mi

  • 基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    情景 目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件 代码片段 $.ajax({ type: "POST", url: root + "/xxx, data: requestData, dataType: "json", success: function(data){ // 清空列表 $("#formOpinion #

  • 基于Jquery插件实现跨域异步上传文件功能

    基于Jquery插件实现跨域异步上传文件功能

    先说明白 这个跨域异步上传功能我们借助了Jquery.form插件,它在异步表单方面很有成效,而跨域我们会在HTTP响应头上添加access-control-allow-method,当然这个头标记只有IE10,火狐和谷歌上支持,对于IE10以下的浏览器来说,我们就不能用这种方式了,我们需要换个思路去干这事,让服务端去重写向我们的客户端,由客户端(与文件上传页面在同域下)来返回相关数据即可. 再做事 1 Jquery.form的使用 <form method="post" act

  • 详解vue2父组件传递props异步数据到子组件的问题

    测试环境:vue v2.3.3, vue v2.3.1 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-data="asyncData"></child> </div> </template> <script> import child from './child' export de

  • C#使用Jquery zTree实现树状结构显示 异步数据加载

    C#使用Jquery zTree实现树状结构显示_异步数据加载 JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/demo.php#_101 关于zTree的详细解释请看演示页面,还有zTree帮助Demo. 下面简要讲解下本人用到的其中一个实例(直接上关键代码了): 异步加载节点数据: A-前台: <link href="zTree_v3-mas

  • 基于jQuery通过jQuery.form.js插件实现异步上传

    本文主要从前台和后台代码分析了jquery.form.js实现异步上传的方法,分享给大家,具体代码如下 前台代码: @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.7.2.min.j

  • jQuery基于ajax()使用serialize()提交form数据的方法

    本文实例讲述了jQuery基于ajax()使用serialize()提交form数据的方法.分享给大家供大家参考,具体如下: jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化,如: <form action=""> First name: <input type="text" name="FirstName" value=&qu

  • Android基于Intent实现Activity之间数据传递的方法

    本文实例讲述了Android基于Intent实现Activity之间数据传递的方法.分享给大家供大家参考,具体如下: MainActivity: package com.test.intentdemo; import android.app.Activity; import android.content.Intent; import android.net.Uri; import android.os.Bundle; import android.view.Menu; import andro

  • Spring Boot异步线程间数据传递的四种方式

    目录 Spring Boot 自定义线程池实现异步开发 1. 手动设置 2. 线程池设置TaskDecorator 3. InheritableThreadLocal 4. TransmittableThreadLocal TransmittableThreadLocal原理 总结 Spring Boot 自定义线程池实现异步开发 Spring Boot 自定义线程池实现异步开发相信看过的都了解,但是在实际开发中需要在父子线程之间传递一些数据,比如用户信息,链路信息等等 比如用户登录信息使用Th

随机推荐