Integrate jQuery to implement Ajax functions in Struts2 (1)

Integrate jQuery to implement Ajax functions in Struts2 (1)

Many things are popular in the technical field. Naturally, jQuery has been used over the past few days. I am deeply impressed that some people are so smart that they can integrate so many technologies perfectly.

First, define a concept:

What is jQuery? It is a js program file developed in the javascript language to meet the requirements of various operations on the project front-end. That is to say, jQuery is basically a js assembly,The basic core is the jQuery. js file..

L of course, depending on the specific manifestation of different versions:

JQuery.1.6.jsOrJquery-1.5.1.js

This is the difference between version numbers. What are the differences.

L this form is also available

Jquery-1.5.1.min.js(Compress the format, cancel the carriage return, and run a line of code)

L jQuery

1 introduce jQuery

Introduce jQuery into the project

L download jQuery: http://docs.jquery.com/Downloading_jQuery

L add a core file: copy the core jQuery file to the project.

<Script type = "text/javascript" src = "js/jquery/jquery-1.6.js"> </script>

<Scripttype = "text/javascript">

Functioncheckkey ()

{

............ Use jQuery technology to customize code ............

}

</Script>

2 jQuery Ajax

JQuery's content is very complex and can solve many needs, including Ajax, page effects, and page verification.

As a J2ee project, I mainly focus on Ajax and page verification.

JQuery's Ajax is simple. It can be implemented only by using the core file jQuery. js.

Function	Description
JQuery. ajax ()	Execute an asynchronous HTTP (Ajax) request.
JQuery. get ()	Use http get requests to load data from the server.
JQuery. getJSON ()	Use http get requests to load JSON-encoded data from the server.
JQuery. post ()	Use http post to load data from the server.

There are many ways to use Ajax. Here, only three methods are simply studied (in fact, oneJQuery. ajax ()). Others are short for jQuery. ajax.

The specific format of the above website is already very clear. Remember the following format.

$. Ajax ({

Type: 'post', // submission method

Url: url, // submitted address

Data: data, // submitted parameters

Success: success, // callback function name after successful

DataType: Data Type returned by dataType //

});

Example:

Post example: use the simplified post () method of ajax (): There are three parameters in the middle: url, data (json format), callback function (the callback function can be defined somewhere else, write only the function name here)

$. Post ("test. jsp ",

{Name: "John", time: "2 "},

Function (data ){

Alert ("DataLoaded:" + data );

});

3. Integrate jQuery with Struts2

In Struts2, the main business operations are completed through actions. In this case, jQuery is required to access the actions of Struts2.

$. Post ("Action ",......)

3.1 Login. jsp page:

LFunction: to log on to a user, you must first enter the company ID code:

LCorrect: a check mark is displayed;

LError: Red Cross is displayed;

LJQuery code:

<Scripttype = "text/javascript" > </Script>

<Scripttype = "text/javascript">

Function checkkey (){

Var url = 'getkeyexist ';

Var params = {companyKey: $ ('# ckey'). attr ('value ')};

Certificate ('{warn'}.html ("");

JQuery. post (url, params, callbackFun );

}

Function callbackFun (data ){

Certificate ('{warn'}.html (data );

}

</Script>

LHTML: when the text box loses focus, a callback event is triggered.

Company logo

"Ckey"Onblur ="Checkkey ();"> Warn">

LNote:

N when the text box 'key' loses focus: Call"Checkkey"Function;

N"CheckkeyThe function determines two information:

U asynchronous access:'Getkeyexist '--The Action class that determines whether the identity is correct.

U parameter:{CompanyKey: $ ('# ckey'). attr ('value ')},A json-formatted spelling parameter.

U Note: Json object format:

U sends an asynchronous request: jQuery. post (url, params, callbackFun );

3.2 Action Code:

The traditional actions return strings, and they decide to forward to different Jsp pages based on different strings, which makes Ajax troublesome. I made some detours at the beginning.

3.2.1 get callback information through Jsp

Tedious and meaningless. delete/omitted!

3.2.2 The Action completes the response independently (that is, the result object is serialized in Json format and then written into HttpServletResponse ):

Later, it was found that the Action can also complete the response independently without the support of Jsp. The code is modified as follows:

LAction: The getKeyExist method is created and the return value is not provided.

If (complist. size ()> 0)

Remessage= "";

Else

Remessage= "";

HttpServletResponseresponse = ServletActionContext. getResponse ();

Response. setCharacterEncoding ("UTF-8 ");

Response. getWriter (). write (remessage );

LStruts. xml: Creates a new result;

LIn this case, the response is much simpler.

The above method can get the response information, but in many cases, you also need to differentiate the response results to determine different display effects. At this time, the response value must carry more information, that is, it is not a simple string, but an object. The Json format is relatively convenient (the Json object format is mentioned in 3.1 ).

LAction: Change the response information to json format;

If (complist. size ()> 0 ){

Remessage ="{Type: 'yes', show :''}";

}

Else {

Remessage ="{Type: 'no', show :''}";}

LJQuery: callback result

Function callbackFun (data ){

Eval ('json = '+ data +'; '); // parse json response data by yourself

If (Json. type= 'No '){

$ ('# Ckey'). focus ();

}

Certificate ('{warn'}.html(Json. show);

}