Use Ajax so easy in struts2 !!!

It is very simple to use Ajax in struts2, and it is easier to use Ajax. If you don't talk much about it, go directly to the Code:

Generally, we usually need to perform two operations when performing operations such as Delete and modify. One operation is a specific operation, the other is page loading, and the other operation is generally to pass in two actions.

// Delete question: Batch delete function deletesub (deltagaction, listtagaction) {// obtain the current page number var currentpage =$ ("# currentpage "). val (); // The following is the selected check box var IDs = new array (); if ($ ("input [name = 'id']: checked "). size () = 0) {alert ("select the question to delete! "); Return false ;}$ (" input [name = 'id']: checked "). each (function (I, OBJ) {IDs [I] = $ (OBJ ). val () ;}); var idstr = IDs. join ("-"); $. ajax ({URL: deltagaction, data: {sendtime :( new date ()). gettime (), idstr: idstr}, type: "Post", async: false, datatype: "JSON", success: function (data) {If (data. success) {$ ("# Middle "). load (listtagaction, {sendtime :( new date ()). gettime (), currentpage: currentpage}) Alert ("deleted successfully !!! ");} Else {alert (" deletion failed. Please contact the developer !!! ");}}});}

You can call Ajax Based on the event on the page. The two parameters passed in are 1. Action of the delete operation 2. Action of the page to be loaded after the operation is successful

Struts. xml:

<Action name = "action to be loaded on the page" class = "xidian. SL. action. exam. singlesubaction "method =" singdetail "> <result name =" success "type =" freemarker ">/WEB-INF/admin/load page </result> </Action> <action name = "Action of the delete operation" class = "xidian. SL. action. exam. singlesubaction "method =" updatesing "> <result name =" success ">/WEB-INF/responsemsg. JSP </result> </Action>

Action of the delete operation: (the response in it is a string that can be replaced by another name)

// Delete the single-choice Public String deletesing () {try {singlesubservice. deletesinglesub (idstr); // Delete response = "{success: true}";} catch (exception e) {response = "{success: false}"; E. printstacktrace ();} return success ;}

After the operation is successful, it will return to struts2.xml, the page first returns to/WEB-INF/responsemsg. jsp, this JSP is only indirectly output the message

<%@ taglib prefix="s" uri="/struts-tags"%><% response.setCharacterEncoding("UTF-8"); %><% System.out.println(response); %><s:property value="response" escape="false"/>

 

Another submission method is to use submit to submit the entire form (Form) using Ajax

The form code is as follows:

<Div class = "controltitle"> current operation: Information Management --> Add Student Information </div> <form action = "inforaddaction. action "method =" Post "name =" inforadd "enctype =" multipart/form-Data "id =" inforaddform "onsubmit =" Return checkadd (this ); "> <Table class =" tablefirst "id =" radiosub "> <Col style =" width: 5% "/> <Col style =" width: 10% "/> <Col style =" width: 5% "/> <Col style =" width: 10% "/> <tr> <TH> Operation Details </Th> <TH> write </Th>> </tr> <TD> Student name: </TD> <input type = "text" name = "stuinfor. stuname "id =" stu_name "> </TD> <TD> Student gender: </TD> <input type =" radio "name =" stuinfor. stusex "id =" stu_sex "value =" male "Checked> & nbsp; male & nbsp; <input type = "radio" name = "stuinfor. stusex "id =" stu_sex "value =" female "> & nbsp; female </TD> </tr> <TD> Student ID: </TD> <input type = "text" name = "stuinfor. stunum "id =" stu_name "> </TD> <TD> Major: </TD> <select name =" stuinfor. stuzy "id =" stu_name "> <option value =" "> seven-year system </option> <option value =" "> bachelor degree </option> <option value = "Ophthalmology"> ophthalmology </option> </SELECT> </TD> </tr> <TD> Major: </TD> <input type = "text" name = "stuinfor. stuxz "id =" stu_name "> </TD> <TD> Student Nationality: </TD> <input type =" text "name =" stuinfor. stujg "id =" stu_name "> </TD> </tr> <TD> admission year: </TD> <input type = "text" id = "newstime" name = "stuinfor. stustarttime "onfocus =" wdatepicker () "/> </TD> <TD> graduation year: </TD> <input type = "text" id = "newstime" name = "stuinfor. stuendtime "onfocus =" wdatepicker () "/> </TD> </tr> <TD> working province and city: </TD> <input type = "text" name = "stuinfor. stuworkaddress "id =" stu_name "> <font color =" red "> & nbsp; * province + city [such as Hangzhou, Zhejiang] </TD> <TD> company: </TD> <input type = "text" name = "stuinfor. stuworkplace "id =" stu_name "> </TD> </tr> <TD> job title: </TD> <input type = "text" name = "stuinfor. stuworkpost "id =" stu_name "> </TD> <TD> title: </TD> <input type =" text "name =" stuinfor. stuworkzc "id =" stu_name "> </TD> </tr> <TD> office phone number: </TD> <input type = "text" name = "stuinfor. stuphone "id =" stu_name "> </TD> <TD> mobile phone number: </TD> <input type =" text "name =" stuinfor. stutelephone "id =" stu_name "> </TD> </tr> <TD> QQ number: </TD> <input type = "text" name = "stuinfor. stuqq "id =" stu_name "> </TD> <TD> Email: </TD> <input type =" text "name =" stuinfor. stuemail "id =" stu_name "> </TD> </tr> <TD> communication address: </TD> <input type = "text" name = "stuinfor. stucommaddress "id =" stu_name "> </TD> <TD> Home address: </TD> <input type =" text "name =" stuinfor. stuaddress "id =" stu_name "> </TD> </tr> <TD> upload the Avatar: </TD> <input type = "file" name = "Upload" id = "Upload"> </TD> </tr> </table> <input type = "Submit" name = "test" value = "Confirm storage"> <input type = "button" name = "test" value = "return list" onclick = "showaddbatchsub (0, 'inforlistaction. action '); "> </form>

Called JS:

Function checkadd (form) {var Options = {datatype: 'json', success: inforaddresponse}; $ ("# inforaddform "). ajaxsubmit (options); Return false;} // callback function inforaddresponsponse (responsetext) {alert (responsetext. MSG );}

The operations on the background are the same.