Jquery asynchronously submits a form to Action

Jquery asynchronously submits a form to Action

 

Requirement 1

Out of interest, I recently made a management interface for the Distributed registration center. One module is the left-side tree that shows all ZooKeeper nodes and uses the ztree implementation, when a tree node is clicked, the system queries the background action and returns the node data, which is displayed in the right area. To avoid refreshing the entire page, the Jquery asynchronous request Action is used to return JSON data, refer to my article and use the Jquery load function to load nodeInfo that displays node information. jsp, with the returned JSON data as the parameter.

The effect is as follows:

The requirement is: after editing the node information, click Save and request action to save the node data. The prompt message indicating that the node is successfully saved is displayed. Similar to clicking on the left Tree node to refresh the right node information area, Jquery's asynchronous form submission is required.

 

Solution 2

The node information area is carried by a form. The Code is as follows:

 

The JQuery code for asynchronous form submission is as follows:

 

 

$(document).ready(function () {        $(#btnFormSubmit).click(function () {                $.ajax({            type: POST,            url: SaveNodeInfo.action,            data: $(#nodeInfoForm).serialize(),            dataType: text,            success: function(data) {             var response = eval((+data+));            if (data.length > 0 && response=='success')            {            $(#myAlert).html('

Node information saved!');} Else {response (your myalert).html (' Failed to save node information!') ;}}, Error: function () {$ (# configInfo). load (error. jsp) ;}}); return false ;});});
Similar to the json returned by the asynchronous request action, the action is implemented 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 (the configNode object is empty);} // save node info... this. saveResult = success; return SUCCESS ;}

The action configuration in struts. xml is as follows:

 

 

            
 
  saveResult            
         

Note that saveResult is an internal variable of action. You must provide the get method on the frontend page to obtain the returned value.

 

After the asynchronous request is successful, if the returned string is a succes custom string, a message indicating success is displayed. Otherwise, a message indicating failure is displayed.

 

Note: You can see that the input control used name = obj in the form submitted to the Action. attribute, so long as the obj object is defined in the action and the set method is provided, the page will automatically inject the obj object in the form into the obj variable in the action when requesting the action.