快捷導(dǎo)航

基于JQuery和DWR實(shí)現(xiàn)異步數(shù)據(jù)傳遞

更新時(shí)間：2020年10月16日 10:31:06 作者：cuisuqiang

這篇文章主要介紹了基于JQuery和DWR實(shí)現(xiàn)異步數(shù)據(jù)傳遞,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

后臺(tái)我用DWR進(jìn)行異步數(shù)據(jù)傳遞：

代碼很簡(jiǎn)單，就是返回一個(gè)數(shù)組，如果需求不同可以自己修改：

package org.dwr.re;
/**
 * 測(cè)試 返回?cái)?shù)組
 * @author 崔素強(qiáng)
 */
public class BackArray {
	public String[] backArr() {
		String[] arr = new String[] { "堅(jiān)持", "就是", "勝利" };
		return arr;
	}
}

前臺(tái)記得導(dǎo)入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>自動(dòng)補(bǔ)全</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; //高亮節(jié)點(diǎn)
	var timeOutId;
	$(document).ready(function() {	
	var wordInput = $("#keyText"); //文本框值	
  var wordInputOffset = wordInput.offset(); //文本框?qū)傩?
	//初始時(shí)層隱藏,并設(shè)置它的樣式,位置
  $("#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(); //當(dāng)前文本框值
			if (wordText != ""){
				//將上一次沒有完成的請(qǐng)求清除
				clearTimeout(timeOutId);
				//將請(qǐng)求延遲
				timeOutId = setTimeout(function(){
					//使用DWR返回?cái)?shù)據(jù)，暫時(shí)沒有設(shè)置參數(shù)，返回一個(gè)字符串?dāng)?shù)組即可
					arr.backArr(function back(data){
			  		for(i = 0;i < data.length;i++){	
			  			var newDiv = $("<div>").attr("id",i); // 增加標(biāo)識(shí)		  			  			
			  			newDiv.html(data[i]).appendTo(autoNode); //創(chuàng)建新的節(jié)點(diǎn)到原DIV元素
			  			//鼠標(biāo)移入事件
			  			newDiv.mouseover(function(){
			  				if(highlightindex != -1){
			  					$("#auto").children("div").eq(highlightindex)
			  					.css("background-color","white");
			  				}
			  				//增加一個(gè)屬性
			  				highlightindex = $(this).attr("id");
			  				//當(dāng)前設(shè)為紅色
			  				$(this).css("background-color","red");
			  			});
			  			//鼠標(biāo)移出事件
			  			newDiv.mouseout(function(){
			  				//當(dāng)前清除顏色
			  				$(this).css("background-color","white");
			  			});
			  			//鼠標(biāo)單擊事件
			  			newDiv.click(function(){
			  				//取出高亮節(jié)點(diǎn)的文本內(nèi)容
				        var comText = $("#auto").hide().children("div").eq(highlightindex).text();
				        highlightindex = -1;
				        //文本框中的內(nèi)容變成高亮節(jié)點(diǎn)的內(nèi)容
				        $("#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) {
          //如果原來存在高亮節(jié)點(diǎn)，則將背景色改稱白色
          autoNodes.eq(highlightindex).css("background-color","white");
          highlightindex--;
        } else {
          highlightindex = autoNodes.length - 1;  
        }
        if (highlightindex == -1) {
          //如果修改索引值以后index變成-1，則將索引值指向最后一個(gè)元素
          highlightindex = autoNodes.length - 1;
        }
        //讓現(xiàn)在高亮的內(nèi)容變成紅色
        autoNodes.eq(highlightindex).css("background-color","red");
      }
  		if (keyCode == 40) { //向下        
        var autoNodes = $("#auto").children("div")
        if (highlightindex != -1) {
          //如果原來存在高亮節(jié)點(diǎn)，則將背景色改稱白色
          autoNodes.eq(highlightindex).css("background-color","white");
        }
        highlightindex++;
        if (highlightindex == autoNodes.length) {
          //如果修改索引值以后index變成-1，則將索引值指向最后一個(gè)元素
          highlightindex = 0;
        }
        //讓現(xiàn)在高亮的內(nèi)容變成紅色
        autoNodes.eq(highlightindex).css("background-color","red");
      }
  	} else if (keyCode == 13) {
  		 //下拉框有高亮內(nèi)容
      if (highlightindex != -1) {
        //取出高亮節(jié)點(diǎn)的文本內(nèi)容
        var comText = $("#auto").hide().children("div").eq(highlightindex).text();
        highlightindex = -1;
        //文本框中的內(nèi)容變成高亮節(jié)點(diǎn)的內(nèi)容
        $("#keyText").val(comText);
      } else {
        //下拉框沒有高亮內(nèi)容
        alert("文本框中的[" + $("#keyText").val() + "]被提交了");
      }
  	}
	});
	});
	</script>	
 </head> 
 <body>
  <input type="text" id="keyText" name="keyText" width="50px" />
  <div id="auto" align="left"></div>
 </body>
</html>

當(dāng)你輸入時(shí)，會(huì)去后臺(tái)查詢并顯示一些數(shù)據(jù)，你可以使用上下鍵來操作，回車時(shí)自動(dòng)提交數(shù)據(jù)！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: