Application of "JSP" Jqueryajax technology in JSP and regular expression in JavaScript

Ajax is not a new language, but a very common instant response technology, very simple, not psycho, just like database technology can be applied to php,asp.net,asp and JSP and other major web pages, and the web has a very good fusion

Ajax must be running on the server, because Ajax is a server technology, so it is not possible to pass values between two local Web pages that are not mounted on the server, even though jquery itself does not need to be mounted to the server for use

So what exactly is Ajax?

A traditional form submission can sometimes bring a bad experience to the user,

For example, the following examples:

Under Jqueryajax.jsp, there is a form like this, very simple, two dialog boxes,

<form action= "jqueryhandle.jsp" method= "POST" ><input type= "text" id= "Number1" name= "Number1"/><input Type= "text" id= "number2" name= "number2"/><input type= "Submit" value= "go!" /></form>

Passing values to jqueryhandle.jsp, hoping Jqueryhandle.jsp to complete an addition,

<%@ page language= "java" import= "java.util.*" pageencoding= "Utf-8"%>  <%  String number1rec= Request.getparameter ("Number1");  String number2rec=request.getparameter ("number2");  int Number1=integer.parseint (NUMBER1REC);  int Number2=integer.parseint (NUMBER2REC);  int result=number1+number2;  %> the  result is:<%=result%>

And then output the results

Of course, this is just for example, the completion of the addition can be done directly with JavaScript or jquery script language, direct output, but the problem is, if, Jqueryajax.jsp is to jqueryhandle.jsp even servlet or SSH pass a value and use this value to query the database and other background operations, then at the same time want to achieve the following effect, do not refresh, do not submit the form to return the results to the user, what should be done?

This is where Ajax technology is used.

I. BASIC OBJECTIVES

is to complete the above example, enter two numbers in two text boxes, do not refresh, get results by jqueryhandle.jsp Instant

Also use regular expressions to certify whether the two input boxes are an integer, so that jqueryhandle.jsp cannot convert them to integers, and then the Tomcat console keeps giving the error

Second, the production process

1. First create a new Web project in Eclipse, with two new pages in it, A jqueryajax.jsp and jqueryhandle.jsp, a folder JS, the inside is loaded with a jquery.js, as for jquery.js How to configure can refer to my previous "jQuery" using JQ to write the most basic fade effect " A article (click to open the link), in fact, there is nothing difficult, is to download a JS file from the official web site on the line, directory structure as follows:

2, jqueryhandle.jsp

Ajax technology is not used here, The code here is the above jqueryhandle.jsp code, a simple can not be simpler JSP code, the need to get the number1 and number2 two values, and then convert them to Integer, then add, and add their results after the result output.

<%@ page language= "java" import= "java.util.*" pageencoding= "Utf-8"%>  <%  String number1rec= Request.getparameter ("Number1");  String number2rec=request.getparameter ("number2");  int Number1=integer.parseint (NUMBER1REC);  int Number2=integer.parseint (NUMBER2REC);  int result=number1+number2;  %> the  result is:<%=result%>

However, this code is supposed to prevent malicious users from directly accessing this page error, so should be added to throw an exception structure, protect this page

3, jqueryajax.jsp

<%@ page language= "java" import= "java.util.*" pageencoding= "Utf-8"%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
The entire page polls the Jqueryajax () function every 0.5 seconds, jqueryajax (), and details can refer to my previous "JavaScript" using the SetInterval () function as a simple polling operation (click the Open link) article.
Jqueryajax () First get the value of the input box, jQuery for the operation of the Web node, but also refer to my previous "JQuery" Control node, only in the foreground through the Get method to complete the parameter Pass "article (click to open the link)
The number is then determined by the regular expression to determine whether the integer is the same as
The regular expression is like this,
Like what:
var Pattern=/^[0-9]*[1-9][0-9]*$/;var flag = Pattern.test (a);
The positive integer matching expression is/^[0-9]*[1-9][0-9]*$/, so you can see if a is a positive integer by its test method, if a is a positive integer, the Boolean value of flag is true, and if a is not a positive integer, the Boolean value of flag is false.
As for the database of matching expressions on the Web, for example, I use the integer match expression:/^-?\d+$/;, while the regular expression for the html tag of  is:/]+ >/gi, just take it and use the test method.
Interested friends, you can look at the regular expression of the syntax, here does not make a detailed introduction
If it is an integer, then the AJAX technique in jquery is executed:
   $.ajax ({type: "post", url: "jqueryhandle.jsp", DataType: "Text", Data:{number1:numbera,number2:numberb},success: function (data) {$ ("#rec"). Text (data);},error:function () {}});

This structure must be in a JS function, directly written in the outside is not in accordance with the syntax, type inside is the Post method or get method, the URL is to the corresponding page, equivalent to the form of the Action property, datatype is the corresponding page return type, is generally text, If it is JSON then the following success, use data = eval (data), erase it into the array data, then the data[i] this array to handle.
The Data property is the parameter to be passed to the response page of jqueryhandle.jsp, which means that the Number1 value required for jqueryhandle.jsp, which is jqueryhandle.jsp request.getparameter ("Number1"), the value of the request for the Numbera of this page, in fact, the general Numbera are written number1, here in order to explain the renaming.
After success is the AJAX successful processing, you need to execute the Web script, generally successful, so the error structure is generally left blank, of course, you can also write a popup
The data form parameter in function, which means that all the contents of jqueryhandle.jsp are brought here, there is only one script, that is, the value of the P tag ID rec is changed to this form parameter data.
Since then, the entire Jqueryajax project has been developed, linked to Tomcat to see results, compatible with all browsers.
Application of "JSP" Jqueryajax technology in JSP and regular expression in JavaScript