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

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

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

时间: 2020-10-13

DWR中各种java方法的调用

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

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

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

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

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

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

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

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

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

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

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

java并发编程专题(七)----(JUC)ReadWriteLock的用法

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

java并发编程专题(四)----浅谈(JUC)Lock锁

首先我们来回忆一下上一节讲过的synchronized关键字,该关键字用于给代码段或方法加锁,使得某一时刻它修饰的方法或代码段只能被一个线程访问.那么试想,当我们遇到这样的情况:当synchronized修饰的方法或代码段因为某种原因(IO异常或是sleep方法)被阻塞了,但是锁有没有被释放,那么其他线程除了等待以外什么事都做不了.当我们遇到这种情况该怎么办呢?我们今天讲到的Lock锁将有机会为此行使他的职责. 1.为什么需要Lock synchronized 是Java 语言层面的,是内置的关

java并发编程专题(十)----(JUC原子类)基本类型详解

这一节我们先来看一下基本类型: AtomicInteger, AtomicLong, AtomicBoolean.AtomicInteger和AtomicLong的使用方法差不多,AtomicBoolean因为比较简单所以方法比前两个都少,那我们这节主要挑AtomicLong来说,会使用一个,其余的大同小异. 1.原子操作与一般操作异同 我们在说原子操作之前为了有个对比为什么需要这些原子类而不是普通的基本数据类型就能满足我们的使用要求,那就不得不提原子操作不同的地方. 当你在操作一个普通变量时,

java并发编程专题(九)----(JUC)浅析CyclicBarrier

上一篇我们介绍了CountDownlatch,我们知道CountDownlatch是"在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待",即CountDownLatch的作用是允许1或N个线程等待其他线程完成执行,而我们今天要介绍的CyclicBarrier则是允许N个线程相互等待. 1.CyclicBarrier简介 CyclicBarrier 的字面意思是可循环使用(Cyclic)的屏障(Barrier).它要做的事情是,让一组线程到达一个屏障(也可以叫同步点)

java并发编程专题(八)----(JUC)实例讲解CountDownLatch

CountDownLatch 是一个非常实用的多线程控制工具类." Count Down " 在英文中意为倒计数, Latch 为门问的意思.如果翻译成为倒计数门阀, 我想大家都会觉得不知所云吧! 因此,这里简单地称之为倒计数器.在这里, 门问的含义是:把门锁起来,不让里面的线程跑出来.因此,这个工具通常用来控制线程等待,它可以让某一个线程等待直到倒计时结束, 再开始执行. CountDown Latch 的构造函数接收一个整数作为参数,即当前这个计数器的计数个数. public Co

java并发编程专题(六)----浅析(JUC)Semaphore

半路开始看的朋友可以回顾一下前几篇 java并发编程专题(一)----线程基础知识 java并发编程专题(二)----如何创建并运行java线程 java并发编程专题(三)----详解线程的同步 java并发编程专题(四)----浅谈(JUC)Lock锁 java并发编程专题(五)----详解(JUC)ReentrantLock Semaphore,从字面意义上我们知道他是信号量的意思.在java中,一个计数信号量维护了一个许可集.Semaphore 只对可用许可的号码进行计数,并采取相应的行动

java并发编程专题(五)----详解(JUC)ReentrantLock

上一节我们了解了Lock接口的一些简单的说明,知道Lock锁的常用形式,那么这节我们正式开始进入JUC锁(java.util.concurrent包下的锁,简称JUC锁).下面我们来看一下Lock最常用的实现类ReentrantLock. 1.ReentrantLock简介 由单词意思我们可以知道这是可重入的意思.那么可重入对于锁而言到底意味着什么呢?简单来说,它有一个与锁相关的获取计数器,如果拥有锁的某个线程再次得到锁,那么获取计数器就加1,然后锁需要被释放两次才能获得真正释放.这模仿了 sy

java并发编程专题(十一)----(JUC原子类)数组类型详解

上一节我们介绍过三个基本类型的原子类,这次我们来看一下数组类型: AtomicIntegerArray, AtomicLongArray, AtomicReferenceArray.其中前两个的使用方式差不多,AtomicReferenceArray因为他的参数为引用数组,所以跟前两个的使用方式有所不同. 1.AtomicLongArray介绍 对于AtomicLongArray, AtomicIntegerArray我们还是只介绍一个,另一个使用方式大同小异. 我们先来看看AtomicLong

java并发编程专题(一)----线程基础知识

在任何的生产环境中我们都不可逃避并发这个问题,多线程作为并发问题的技术支持让我们不得不去了解.这一块知识就像一个大蛋糕一样等着我们去分享,抱着学习的心态,记录下自己对并发的认识. 1.线程的状态: 线程状态图: 1.新建状态(New):新创建了一个线程对象. 2.就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法.该状态的线程位于可运行线程池中,变得可运行,等待获取CPU的使用权. 3.运行状态(Running):就绪状态的线程获取了CPU,执行程序代码. 4

java并发编程专题(三)----详解线程的同步

有兴趣的朋友可以回顾一下前两篇 java并发编程专题(一)----线程基础知识 java并发编程专题(二)----如何创建并运行java线程 在现实开发中,我们或多或少的都经历过这样的情景:某一个变量被多个用户并发式的访问并修改,如何保证该变量在并发过程中对每一个用户的正确性呢?今天我们来聊聊线程同步的概念. 一般来说,程序并行化是为了获得更高的执行效率,但前提是,高效率不能以牺牲正确性为代价.如果程序并行化后, 连基本的执行结果的正确性都无法保证, 那么并行程序本身也就没有任何意义了.因此,