jquery asynchronously submits form to action

Reprint Please specify the Source: Jiq ' s technical Blog

A demand

Out of interest recently in the management interface of the distributed registry, one of the modules is the left tree display all zookeeper nodes, using the Ztree implementation, click on the tree node will query the background action return node data, display in the right area, in order not to brush the entire page, So using the jquery asynchronous request action to return the JSON data, refer to my article, and then use the jquery load function to load the display node information nodeinfo.jsp, with the returned JSON data as parameters.

The effect is as follows:

Now the demand is: I want to edit the node information, click Save, request the action to save the node data, the current page does not jump, and pop-up saved a successful message. It is similar to clicking on the left tree node to refresh the right node information area, which will be submitted using jquery's asynchronous form.

Second Solution

The node information area is hosted in a single form, with the following code:

<form class= "Form-horizontal" method= "post" id= "Nodeinfoform" ><fieldset><div class= "Form-group" >    <label class= "Col-lg-2 control-label" > name      call:</label> <div class= "col-lg-9" > <input id= "ConfigName" value= "<%=node.getname ()%>" name= "Confignode.name" type= "text" class= "Form-control" placeholder= "Please enter name" readonly> </div> <div class= "col-lg-1" ></div> </div> <di V class= "Form-group" > <label class= "col-lg-2 control-label" > Road      diameter:</label> < Div class= "col-lg-9" > <input id= "Configpath" value= "<%=node.getpath ()%>" name= "Confignode.path" type= "    Text "class=" Form-control "placeholder=" Please enter path "readonly> </div> <div class=" Col-lg-1 "></div> </div> <div class= "Form-group" > <label class= "col-lg-2 Control-label" > Configuration values:</label> <d IV class= "COL-LG-9" > <inpuT id= "ConfigValue" value= "<%=node.getvalue ()%>" name= "Confignode.value" type= "text" class= "Form-control" place Holder= "Please enter value" > </div> <div class= "col-lg-1" ></div> </div> <div class= "Form-group "> <label class=" col-lg-2 control-label "> attribute value:</label> <div class=" col-lg-9 "> <div CLA ss= "Panel Panel-default" > <div class= "bootstrap-admin-panel-content" > <table style= "font-size:13px" Clas s= "Table Table-hover table-condensed table-bordered" > <thead> <tr> <th> property name </th> &L T;th> property values </th> </tr> </thead> <tbody> <% hashmap<string, string> Attribu    tes = Node.getattributes (); if (Attributes! = null && attributes.size () > 0) {iterator<string> Iterator = Attributes.keyset (). I    Terator ();    while (Iterator.hasnext ()) {String key = Iterator.next (). toString (); String value = attributeS.get (Key). ToString (); %> <tr class= "active" > <td><%=key%></td> <td><%=value%></td> &lt    ;/tr> <%}}%> </tbody> </table> </div> </div> </div> <div class= "col-lg-1" ></div> </div> <div class= "Form-group" > <label class= "col-lg-2 Control-label "> Description     :</label> <div class=" col-lg-9 "> <textarea id=" Configdescrip "Name=" confignode.description "class=" Form-control "rows=" 2 "placeholder=" Please enter a description "><%=    Node.getdescription ()%></textarea> </div> <div class= "col-lg-1" ></div> </div>  <div class= "Form-group" > <div class= "col-lg-1" ></div> <div class= "col-lg-4" > <button Id= "Btnformsubmit" type= "button" class= "Btn btn-primary" > Save </button> <button id= "Btnformreset" type= " Button "class=" Btn btn-defAult "> Reset </button> </div> <div id=" Myalert "class=" col-lg-6 "></div><div class=" col-lg- 1 "></div> </div></fieldset></form>

the jquery code for submitting the form asynchronously is as follows:

$ (document). Ready (function () {$ ("#btnFormSubmit"). Click (function () {$.ajax ({type: "P             OST ", url:" Savenodeinfo.action ", Data: $ (" #nodeInfoForm "). Serialize (), DataType:" Text ",            Success:function (data) {var response = eval ("(" +data+ ")"); if (data.length > 0 && response== ' success ') {$ ("#myAlert"). html (' <div class= ' alert al            Ert-success "><strong> node information saved successfully!</strong></div> '); } else {$ ("#myAlert"). html (' <div class= ' alert alert-warning ' ><strong> node information save lost            Defeat!</strong></div> ');                        }}, Error:function () {$ ("#configInfo"). Load ("error.jsp");                         }        });        return false;    }); });

similar to the asynchronous request for the action return JSON, the action here is as follows:

Public String Savenodeinfo () throws Exception{if (Confignode! = null) {System.out.println (Confignode.getdescription ()) ; System.out.println (Confignode.getvalue ());//spmapsystem.out.println (Confignode.getattributes ()); System.out.println (Attrkey);} Else{system.out.println ("Confignode object is Empty");} Save Node Info...this.saveresult = "Success"; return success;}

The action in Struts.xml is configured as:

<action name= "Savenodeinfo" class= "org.zk.action.ConfigManageAction" method= "Savenodeinfo" >            <result Name= "Success" type= "JSON" >            <param name= "root" >saveResult</param>            </result>        </action>

Note that Saveresult is an action internal variable and needs to provide a GET method for the foreground page to get this return value.

You can see that after the asynchronous request succeeds, if you return a succes custom string, you are prompted for success, otherwise the message fails.

Note: You can see that the input control in the form submitted to the action uses the name= "Obj.attribute" notation, so long as the Obj object is defined in action, and the set method is provided, The Obj object in the form is automatically injected into the obj variable in the action when the page requests the action.

jquery asynchronously submits form to action