Asynchronous data transfer based on JQuery and DWR

  • 2021-08-28 19:26:38
  • OfStack

In the background, I use DWR for asynchronous data transfer:

The code is very simple, that is, it returns an array, which can be modified by itself if the requirements are different:


package org.dwr.re;
/**
 *  Test   Return Array 
 * @author  Cui Suqiang 
 */
public class BackArray {
	public String[] backArr() {
		String[] arr = new String[] { " Stick to ", " Is ", " Victory " };
		return arr;
	}
}

The foreground remembers to import JS for DWR and JS for JQuery, and then write the input event for the text box:


<%@ 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> Automatic completion </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; // Highlight node 
	var timeOutId;
	$(document).ready(function() {	
	var wordInput = $("#keyText"); // Text box value 	
  var wordInputOffset = wordInput.offset(); // Text box properties 
	// Initial time layer hiding , And set its style , Position 
  $("#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);  
	// Text Box Events 
	$("#keyText").keyup(function(){
    var myEvent = event || window.event;
    var keyCode = myEvent.keyCode; // Get the value of the key 
		var autoNode = $("#auto");
		// Enter letters, etc., including carriage return, delete
		if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) {
			autoNode.html("");			
			var wordText=$("#keyText").val(); // Current text box value 
			if (wordText != ""){
				// Will go up 1 Purge of incomplete requests 
				clearTimeout(timeOutId);
				// Delay a request 
				timeOutId = setTimeout(function(){
					// Use DWR Return data, no parameters are set temporarily, return 1 An array of strings can be used 
					arr.backArr(function back(data){
			  		for(i = 0;i < data.length;i++){	
			  			var newDiv = $("<div>").attr("id",i); //  Add identity 		  			  			
			  			newDiv.html(data[i]).appendTo(autoNode); // Create a new node to the original DIV Element 
			  			// Mouse move-in event 
			  			newDiv.mouseover(function(){
			  				if(highlightindex != -1){
			  					$("#auto").children("div").eq(highlightindex)
			  					.css("background-color","white");
			  				}
			  				// Increase 1 Attributes 
			  				highlightindex = $(this).attr("id");
			  				// Currently set to red 
			  				$(this).css("background-color","red");
			  			});
			  			// Mouse removal event 
			  			newDiv.mouseout(function(){
			  				// Current erase color 
			  				$(this).css("background-color","white");
			  			});
			  			// Mouse click event 
			  			newDiv.click(function(){
			  				// Take out the text content of the highlighted node 
				        var comText = $("#auto").hide().children("div").eq(highlightindex).text();
				        highlightindex = -1;
				        // The contents of the text box become the contents of the highlighted node 
				        $("#keyText").val(comText);
			  			});
			  		}
			  		if (data.length > 0){		  			
			  			autoNode.show();
			  		}else{
			  			autoNode.hide();
			  		}
			  	});
		  	},500); // Delay processing 
	  	} else {	  		
		  	autoNode.hide();
	  	}
	  	highlightindex = -1;
  	} else if (keyCode == 38 || keyCode == 40) {
  		if (keyCode == 38) { // Up         
        var autoNodes = $("#auto").children("div")
        if (highlightindex != -1) {
          // If there is a highlighted node, rename the background color white 
          autoNodes.eq(highlightindex).css("background-color","white");
          highlightindex--;
        } else {
          highlightindex = autoNodes.length - 1;  
        }
        if (highlightindex == -1) {
          // If after modifying the index value, index Become -1 The index value points to the last 1 Elements 
          highlightindex = autoNodes.length - 1;
        }
        // Turn the highlighted content into red 
        autoNodes.eq(highlightindex).css("background-color","red");
      }
  		if (keyCode == 40) { // Downward         
        var autoNodes = $("#auto").children("div")
        if (highlightindex != -1) {
          // If there is a highlighted node, rename the background color white 
          autoNodes.eq(highlightindex).css("background-color","white");
        }
        highlightindex++;
        if (highlightindex == autoNodes.length) {
          // If after modifying the index value, index Become -1 The index value points to the last 1 Elements 
          highlightindex = 0;
        }
        // Turn the highlighted content into red 
        autoNodes.eq(highlightindex).css("background-color","red");
      }
  	} else if (keyCode == 13) {
  		 // Drop-down box with highlighted content 
      if (highlightindex != -1) {
        // Take out the text content of the highlighted node 
        var comText = $("#auto").hide().children("div").eq(highlightindex).text();
        highlightindex = -1;
        // The contents of the text box become the contents of the highlighted node 
        $("#keyText").val(comText);
      } else {
        // Drop-down box has no highlighting 
        alert(" In the text box [" + $("#keyText").val() + "] Was submitted ");
      }
  	}
	});
	});
	</script>	
 </head> 
 <body>
  <input type="text" id="keyText" name="keyText" width="50px" />
  <div id="auto" align="left"></div>
 </body>
</html>

When you input, will go to the background query and display some data, you can use the up and down keys to operate, enter the auto-submission of data!


Related articles: