Struts2 integrating jquery for Ajax functions (1)

Technology field a lot of things popular, naturally there are popular truth, these days with jquery, deeply some people are really smart, can be so many technology integration so perfect.

First, define a concept:

What is jquery: A JS program file developed in the JavaScript language to meet the various operational needs of the project foreground. In other words, JQuery is basically a JS assembly, the base core is the jquery.js file .

L Of course according to different versions of the specific manifestation:

jquery.1.6.js or jquery-1.5.1.js

This is the version number of the different, specific what differences, not yet found.

L also have this form

jquery-1.5.1.min.js(condensed format, cancel carriage return, one line of code)

• Depending on the application needs, jQuery

1 Introducing jquery

Introduction of jquery into the project

L Download Jquery:http://docs.jquery.com/downloading_jquery

Add 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 the code ......

}

</SCRIPT>

2 jquery's Ajax

jquery content is very complex, can solve many aspects of the needs, including: Ajax, page effects, page validation.

As a Java EE project, I focused on Ajax and page validation.

jquery's Ajax is simple and can be achieved using only the core file jquery.js.

function	description
jquery.ajax ()
jquery.get ()
jquery.getjson ()	use an HTTP GET request to load JSON encoded data from the server.
jquery.post ()	loads data from the server using an HTTP POST request.

There are a lot of ways to do Ajax, but here are just a few of the three (in fact, a jquery.ajax ()), and the other is the abbreviated form of Jquery.ajax ().

The specific format, said the above site is very clear, remember the following format can be.

$.ajax ({

Type: ' POST ',//Submit method

Url:url,//Address submitted

Data:data,//Parameters Submitted

Success:success,//successful, callback function name

Datatype:datatype//returned data type

});

Example:

Example of post: The Post () method in a simplified format using AJAX (): There are three parameters in the middle: url,data (JSON format), callback function ( callback function can be defined elsewhere, only the name of the function is written here)

$.post ("test.jsp",

{Name: "John", Time: "2pm"},

function (data) {

Alert ("dataloaded:" + data);

});

3 STRUTS2 Integrated jquery

The main business operations in STRUTS2 are done by action, and jquery is required to access the STRUTS2 action.

$.post ("Action",... ) )

3.1 login.jsp page:

L function: User login, the first need to enter the company identification code:

L Correct: show the Tick;

L error: show Red Fork;

L jquery Code:

<scripttype= "Text/javascript" src= "Js/jquery/jquery-1.6.js" ></script>

<scripttype= "Text/javascript" >

function Checkkey () {   

var url = ' Getkeyexist ';

var params ={companykey:$ (' #ckey '). attr (' value ')};

$ (' #warn '). HTML ("

Jquery.post (URL, params,callbackfun);

}

function Callbackfun (data) {

$ (' #warn '). HTML (data);

}

</SCRIPT>

L HTML: Triggers a callback event when the text box loses focus.

<div Class=line><label Class=big id=lblname> Company logo </LABEL>

<input id= ' ckey ' name="Ckey" onblur= "checkkey ();" ><spanid= "warn" ></span>

</DIV>

L Description:

n When the text box ' Ckey ' loses focus: Call the "checkkey" function;

The n "checkkey" function determines two information, respectively:

U async Access:' getkeyexist '-- The action class that determines whether the identity is correct.

U parameter:{companykey:$ (' #ckey '). attr (' value ')}, a parameter spelled in JSON format.

U-NOTE: JSON Object format:

U issue asynchronous request: Jquery.post (URL, params, callbackfun);

3.2 Action Code:

The traditional action is to return a string, forward to different JSP pages based on the different decisions of the string, which can cause problems for Ajax. I took some detours.

3.2.1 through JSP Get callback information

Tedious, meaning does not hit, delete/slightly!

3.2.2 Action self-fulfilling response ( that is , the Json serialization of The resulting object is completed and then written to the httpservletresponse ):

Later found that the action can also be self-fulfilling response, do not need JSP support. The code is modified as follows:

L Action: A new method getkeyexist is created, and no return value is provided.

if (Complist.size () >0)

remessage= "

Else

remessage= "

Httpservletresponseresponse = Servletactioncontext.getresponse ();

Response.setcharacterencoding ("UTF-8");

Response.getwriter (). write (Remessage);

L Struts.xml: Re-establishment of result without results;

<actionname= "Getkeyexist" class= "responsemessageaction" method= "Getkeyexist" >

</action>

L get a lot of simple and clean response at this time.

The above method has been able to get the response information, but in many cases, also need to distinguish the results of the response to determine the different display effect, at this time, the response value will carry more information, that is, not a simple string, but an object. It is relatively convenient to use the JSON format (3.1 refers to the JSON object format).

L Action: Response information changed to JSON format;

if (Complist.size () >0) {

Remessage= "{type: ' Yes ', show: ' '}";

}

else{

Remessage= "{type: ' No ', show: ' '}"; }

L jQuery: callback result

function Callbackfun (data) {

eval (' json= ' + data + '; '); // Self-Analysis Json Response Data

if (json.type= = ' no ') {

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

}

$ (' #warn '). html(json.show);

}