溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了使用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>上述內容就是使用JQuery和DWR如何實現異步數據傳遞，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
