In the DWZ document, the refreshless form submission process for the DWZ framework Ajax is described as follows:

1. The ajax form is submitted to the server

2. The server returns a fixed format json structure

3. The js tuning function processes the json data accordingly

Be careful:

The default ajax form submission of the DWZ framework returns json data, telling the client whether the operation was successful, success or failure prompts, and how to handle it after success (refreshing a navTab or closing a navTab or navTab page jump).

After submitting the form, the server operation failed. After receiving the status code and message, the client gave an error message, and the form page was immobile. This allows users to see the cause of the error and then directly modify the form data to submit again without re-filling the entire form data. Of course, if you still like the form submitted directly into the html page is no problem, refer to dwz.ajax.js to expand their own is no problem.

DWZ form submission dwz.ajax.js

· Ajax automatically calls the default callback function after submission of the form, prompting for success or failure of the operation.

Add onsubmit = "return validate Callback (this) to the Form tag;

· If you need to reload a navTab or close dialog after submitting an Ajax form, you can use the pre-defined method navTab AjaxDone/dialog AjaxDone in dwz.ajax.js

Note: If the form uses navTab AjaxDone on the navTab page, the form uses dialog AjaxDone on the dialog page

Add onsubmit= "return validate Callback (this, navTabAjaxDone)" to the Form tag

Or onsubmit= "return validate Callback (this, dialog Ajax Done)"

· You can also customize a callback function xxAjaxDone if you need to do some other processing after submitting the Ajax form. For example, close the current navTab after successful submission of the form below, or reload a tab.

Add onsubmit = "return validate Callback (this, xxxAjaxDone)" to the Form tag

Server-side response

After submitting the Ajax form, the server needs to return the following json code:

 
{
      "statusCode":"200", 
      "message":"Successful operation", 
      "navTabId":"", //When the server goes back to navTabId, it can mark that navTab as reloadFlag=1. 
                       Next switch to that navTab When the content is reloaded
      "rel":"", 
      "callbackType":"closeCurrent",  //callbackType closes the current tab if it is closeCurrent
                                      // Forward Url value is required only when callbackType="forward"
      "forwardUrl":""
}
 
If the form submission only indicates the success of the operation, You don't specify callback functions.. Framework calls by default DWZ.ajaxDone() 
 * <form action="/user.do?method=save" onsubmit="return validateCallback(this, navTabAjaxDone)">
 * 
 * form Return after submission json data structure statusCode=DWZ.statusCode.ok Represents a successful operation, Do page jumps and other operations. statusCode=DWZ.statusCode.error Represents operation failure, Causes of prompting errors. 
 * statusCode=DWZ.statusCode.timeout Express session Overtime, jump to next click DWZ.loginUrl
 * {"statusCode":"200", "message":"Successful operation", "navTabId":"navNewsLi", "forwardUrl":"", "callbackType":"closeCurrent"}
 * {"statusCode":"300", "message":"operation failed"}
 * {"statusCode":"301", "message":"session time out"}
 

Form submission:

Goal: User Information Addition - > Enter Add Page - > Submit Form - > Display Success Tips and Close the Current Add Page while Back to the original page and reload the data

1. Background index.html:

Set up a customer information management link:

<li> <a href="customer_main.action?Pager.current Page=1" target="navTab" rel="info">customer information management</a></li>

2. Click "Add" to enter the Customer Add Page:

 <li>
<a class="add" href="<%=basePath%>/admin/customer_addInput.jsp" target="navTab"><span> Add</span></a>
</li>

3. Form submission is mainly set in the add page, namely customer_addInput.jsp:

<form method="post" action="<%=basePath%>/admin/customer_add.action" class="pageForm required-validate" onsubmit="return validateCallback(this, navTabAjaxDone);">   <div class="pageFormContent" layoutH="56">             <p>     <label>Customer nicknames:</label>     <input id="cus_id" type="text" name="customer.cus_id" size="30"  class="required"/>    </p>     <p>     <label>Customer name:</label>     <input id="cus_name" type="text" name="customer.cus_name" size="30"  class="required"/>    </p>     <p>     <label>Mailbox:</label>     <input id="cus_email" type="text" name="customer.cus_email" size="30"   class="required email"/>    </p>    <p>     <label>Customer type:</label>     <select name="customer.cus_type" class="required combox">      <option value="">Please choose</option>      <option value="1">Administrators</option>      <option value="2" selected>Customer</option>     </select>    </p>    </div>   <div class="formBar">    <ul>     <!--<li><a class="buttonActive" href="javascript:;"><span>Preservation</span></a></li>-->     <li><div class="buttonActive"><div class="buttonContent"><button type="submit">Preservation</button></div></div></li>     <li>      <div class="button"><div class="buttonContent"><button type="button" class="close">cancel</button></div></div>     </li>    </ul>   </div>  </form> 
 

The key settings are: onsubmit= "return validate Callback (this, navTabAjaxDone);

4. Page effect after successful submission:

Set in the last page to enter:

{  "statusCode":"200",  "message":"u64cdu4f5cu6210u529f",//Successful operation  "navTabId":"info",//Re= "info" in the Customer Information Management Link  "rel":"",  "callbackType":"closeCurrent",//Close the current page  "forwardUrl":"",  "confirmMsg":"" }
The above is successful, the display operation is successful, close the current page, back toinfoThe effect of neutralizing and refreshing data