Struts2 + JQuery + JSON Implement Asynchronous interaction

Struts2 + JQuery + JSON Implement Asynchronous interaction, including obtaining a single value, object, List, and Map data from the background and obtaining values from the foreground expression to serialize the values through JQuery's $. ajax ({}) is uploaded to the background and bound to the background object.

Step 1: Create a JavaWeb factory in MyEclipse and add the jar packages of Struts2 and json to the project. The following figure shows the engineering drawing after the jar packages are added:

 

Step 2: Create a backend:

1. UserInfo entity class:

UserInfo entity class code

1. package struts2jsonjquery. test. entity; 2. 3. import Java. io. serializable; 4. /** 5. * <p> 6. * user entity Class 7. * </P> 8. * @ author Zhu Yanwei 9.*10. */11. public class userinfo implements serializable {12. 13. private Static final long serialversionuid = 3952189513312630860l; 14. 15. private int userid; 16. private string username; 17. private string password; 18. public int getuserid () {19. return userid; 20 .} 21. public void setuserid (INT userid) {22. this. userid = userid; 23 .} 24. public String GetUserName () {25. return username; 26 .} 27. public void setusername (string username) {28. this. username = username; 29 .} 30. public String GetPassword () {31. return password; 32 .} 33. public void setpassword (string password) {34. this. password = password; 35 .} 36 .}

2. Action class
Action Code

Package struts2jsonjquery. test. action; import Java. util. arraylist; import Java. util. hashmap; import Java. util. list; import Java. util. map; import struts2jsonjquery. test. entity. userinfo; import COM. opensymphony. xwork2.actionsupport; public class jsonjquerystruts2action extends actionsupport {Private Static final long serialversionuid = 35188300009938898354l; private string message; // return a single value of private userinfo using JSON; // return the object private list <userinfo> userinfoslist using JSON; // use josn to return the list object private Map <string, userinfo> userinfosmap; // return the map object in JSON format. // provide the get and set method Public String getmessage () {return message;} public void setmessage (string message) {This. message = message;} public userinfo getuserinfo () {return userinfo;} public void setuserinfo (userinfo) {This. userinfo = userinfo;} public list <userinfo> getuserinfoslist () {return userinfoslist;} public void setuserinfoslist (list <userinfo> userinfoslist) {This. userinfoslist = userinfoslist;} public Map <string, userinfo> getuserinfosmap () {return userinfosmap;} public void setuserinfosmap (Map <string, userinfo> userinfosmap) {This. userinfosmap = userinfosmap;}/*** <p> * returns a single value * <p> * @ return */Public String returnmessage () {This. message = "Success returns a single value"; Return "message ";} /*** <p> * returns the userinfo object * </P> * @ return */Public String returnuserinfo () {userinfo = new userinfo (); userinfo. setuserid (10000); userinfo. setusername ("Zhang San"); userinfo. setpassword ("000000"); Return "userinfo";}/*** <p> * returns the list object * </P> * @ return */Public String returnlist () {userinfoslist = new arraylist <userinfo> (); userinfo U1 = new userinfo (); u1.setuserid (10000); u1.setusername ("Zhang San"); u1.setpassword ("000000 "); userinfo U2 = new userinfo (); u2.setuserid (10001); u2.setusername (""); u2.setpassword ("111111"); userinfo U3 = new userinfo (); u3.setuserid (10002 ); u3.setusername (""); u3.setpassword ("222222"); userinfo U4 = new userinfo (); u4.setuserid (10003); u4.setusername ("Zhao "); u4.setpassword ("333333"); userinfoslist. add (U1); userinfoslist. add (U2); userinfoslist. add (U3); userinfoslist. add (U4); Return "list";}/*** <p> * returns the map object * </P> * @ return */Public String returnmap () {userinfosmap = new hashmap <string, userinfo> (); userinfo U1 = new userinfo (); u1.setuserid (10000); u1.setusername ("Zhang San"); u1.setpassword ("000000 "); userinfo U2 = new userinfo (); u2.setuserid (10001); u2.setusername (""); u2.setpassword ("111111"); userinfo U3 = new userinfo (); u3.setuserid (10002 ); u3.setusername (""); u3.setpassword ("222222"); userinfo U4 = new userinfo (); u4.setuserid (10003); u4.setusername ("Zhao "); u4.setpassword ("333333"); userinfosmap. put (u1.getuserid () + "", U1); userinfosmap. put (u2.getuserid () + "", U2); userinfosmap. put (u3.getuserid () + "", U3); userinfosmap. put (u4.getuserid () + "", U4); Return "map";}/*** <p> * Get the object, that is, get the object through expression (asynchronous) * </P> * @ return */Public String gainuserinfo () {system. out. println ("User ID:" + userinfo. getuserid (); system. out. println ("username:" + userinfo. getUserName (); system. out. println ("Password:" + userinfo. getPassword (); Return "userinfo";}/*** you do not need to write a single value */}

3. struts. xml
Struts. xml Code

<? Xml version = "1.0" encoding = "UTF-8"?> <! DOCTYPE struts PUBLIC "-// Apache Software Foundation // DTD Struts Configuration 2.0 // EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <package name = "default" namespace = "/" extends = "json-default"> <action name = "jsontest" class = "struts2jsonjquery. test. action. jsonJqueryStruts2Action "> <! -- Return the result of a single value --> <result name = "message" type = "json"> </result> <! -- Return the UserInfo object --> <result name = "userInfo" type = "json"> </result> <! -- Return the --> <result name = "List" type = "json"> </result> <! -- Return the <result name = "Map" type = "json"> </result> </action> </package> </struts> Struts of the map object. add xml code to favorites <? Xml version = "1.0" encoding = "UTF-8"?> <! DOCTYPE struts PUBLIC "-// Apache Software Foundation // DTD Struts Configuration 2.0 // EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <package name = "default" namespace = "/" extends = "json-default"> <action name = "jsontest" class = "struts2jsonjquery. test. action. jsonJqueryStruts2Action "> <! -- Return the result of a single value --> <result name = "message" type = "json"> </result> <! -- Return the UserInfo object --> <result name = "userInfo" type = "json"> </result> <! -- Return the --> <result name = "List" type = "json"> </result> <! -- Return the --> <result name = "Map" type = "json"> </result> </action> </package> </struts> of the map object.

Front-end:

1. index. jsp

Html code

<% @ Page Language = "Java" pageencoding = "GBK" %> <% string Path = request. getcontextpath (); %> <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"> <HTML> 
2. json. js
Js Code
// When the page is initially loaded $ (document ). ready (function () {// register and click the event $ ("# getMessage") for the button to get a single value "). click (function () {$. getJSON ("jsontest! ReturnMessage. action ", function (data) {// pass. operators can be retrieved from data. get the value of the message in the Action $ ("# message" ).html ("<font color = 'red'>" + data. message + "</font>") ;}); // Add the mouse button for getting UserInfo object $ ("# getUserInfo "). click (function () {$. getJSON ("jsontest! ReturnUserInfo. action ", function (data) {// clear the data in the display layer $ (" # message "pai.html (""); // Add the obtained data to the display layer // use data to obtain the object data. userInfo. attribute $ ("# message "). append ("<div> <font color = 'red'> User ID:" + data. userInfo. userId + "</font> </div> "). append ("<div> <font color = 'red'> User name:" + data. userInfo. userName + "</font> </div> "). append ("<div> <font color = 'red'> password:" + data. userInfo. password + "</font> </div>")}) ;}); // Add a cursor for the get List object button and click event $ ("# getLi St "). click (function () {$. getJSON (" jsontest! ReturnList. action ", function (data) {// clear data in the display layer $ (" # message "pai.html (" "); // use each (data, function () in jQuery () {}); function // from data. userInfosList: Get the UserInfo object and put it into the value $. each (data. userInfosList, function (I, value) {$ ("# message "). append ("<div> NO." + (I + 1) + "User: </div> "). append ("<div> <font color = 'red'> User ID:" + value. userId + "</font> </div> "). append ("<div> <font color = 'red'> User name:" + value. userName + "</font> </div> "). append ("<div> <Font color = 'red'> password: "+ value. password + "</font> </div> ");});});}); // Add the cursor-clicked event for the get Map object button $ ("# getMap "). click (function () {$. getJSON ("jsontest! ReturnMap. action ", function (data) {// clear data in the display layer $ (" # message "pai.html (" "); // use each (data, function () in jQuery () {}); function // from data. userInfosList: Get the UserInfo object and put it into the value. // the key value of Map is $. each (data. userInfosMap, function (key, value) {$ ("# message "). append ("<div> <font color = 'red'> User ID:" + value. userId + "</font> </div> "). append ("<div> <font color = 'red'> User name:" + value. userName + "</font> </div> "). append ("<div> <font color = 'red'> password:" + Value. password + "</font> </div>") ;}); // send expression data to the server $ ("# regRe "). click (function () {// serialize the form data var params = $ ("form "). serialize (); // use $. ajax ({}); Ajax method $. ajax ({url: "jsontest! GainUserInfo. action ", type:" POST ", data: params, dataType:" json ", success: function (data) {// clear the data in the display layer $ ("# message" cmd.html (""); // use data to obtain the object data added to the display layer. userInfo. attribute $ ("# message "). append ("<div> <font color = 'red'> User ID:" + data. userInfo. userId + "</font> </div> "). append ("<div> <font color = 'red'> User name:" + data. userInfo. userName + "</font> </div> "). append ("<div> <font color = 'red'> password:" + data. userInfo. password + "</font> </div> ")}});});});
Note: The JSON plug-in will serialize all attributes containing the getter Method to the returned result. Therefore, do not name other execute methods in the Action.
Prefix with get.