Jquery Ajax form submission implements partial refresh ajaxsubmit

Jquery ajaxsubmit can be used to partially refresh the page Div for Ajax submitted forms (it can be used to refresh JSP tables !)

 

Need to introduce: jquery-form.js

 

 

Instructions for use:

 

Java code

1. $ (Document). Ready (function (){
2. VaR Options = {
3. Target: '# mydiv', // the region to be refreshed
4. // Beforesubmit: showrequest, // method called before submission
5. // Success: showresponse // method of the returned result
7. // Other available options:
8. // URL: URL // submitted URL. By default, form action is used.
9. // Type: Type // 'get' or 'post', override for form's 'method' attribute
10. // Datatype: NULL // 'xml', 'script', or 'json' (expected server response type)
11. // Clearform: True // whether to clear the form
12. // Resetform: True // whether to reset form
14. // $. Ajax options can be used here too, for example:
15. // Timeout: 3000
16. };
18. // Bind the form to submit the event
19. $ ('# Myform'). Submit (function (){
20. $ (This). ajaxsubmit (options );
22. //!!! Important !!!
23. // Always return false to prevent standard browser submit and page navigation
24. Return false;
25. });
26. });

 

 

Before and after the call:

 

Java code

1. // Pre-submit callback
2. Function showrequest (formdata, jqform, options ){
3. // Formdata is an array; here we use $. Param to convert it to a string to display it
4. // But the form plugin does this for you automatically when it submits the data
5. VaR querystring = $. Param (formdata );
7. // Jqform is a jquery object encapsulating the form element. To access
8. // Dom element for the form do this:
9. // Var formelement = jqform [0];
11. Alert ('About to submit: \ n \ n' + querystring );
13. // Here We cocould return false to prevent the form from being submitted;
14. // Returning anything other than false will allow the form submit to continue
15. Return true;
16. }
18. // Post-submit callback
19. Function showresponse (responsetext, statustext ){
20. // For normal HTML responses, the first argument to the success callback
21. // Is the XMLHTTPRequest object's responsetext Property
23. // If the ajaxsubmit method was passed an options object with the datatype
24. // Property set to 'xml' then the first argument to the success callback
25. // Is the XMLHTTPRequest object's responsexml Property
27. // If the ajaxsubmit method was passed an options object with the datatype
28. // Property set to 'json' then the first argument to the success callback
29. // Is the JSON data object returned by the server
31. Alert ('status: '+ statustext +' \ n \ nresponsetext: \ n' + responsetext +
32. '\ N \ nthe output Div shoshould have already been updated with the responsetext .');
33. }

 

 

You can write a public method in the project:

 

Java code

1. // Partial submission form
2. Function formsubmit (formid, divid, URL ){
3. $ ('#' + Formid). Submit (function (){
4. $ (This). ajaxsubmit ({
5. Target: '#' + divid,
6. URL: URL,
7. Error: function (){
8. Alert ('Load page' + URL + 'error! ')
9. }
10. });
11. Return false;
12. });
13. }

 

 

========================================================== ==================================

Case refresh table:

 

1. Separate the table into a JSP, and include the table page on the home page.

 

2. Home Page:

 

 

Java code

1. Window. onload = function (){
2. // Submit the form in Ajax to refresh the table
3. $ ('# Queryform'). Submit (function (){
4. $ (This). ajaxsubmit ({
5. Target: '# table1'
6. });
7. Return false;
8. });
9. }

 

Click the query button to submit the form.

 

3. Java: The method for submitting and calling form is the same as that for common actions. configure this action in struts to jump to the separate table JSP page. After the result is returned successfully, the table is refreshed.

 

Java code

1. /**
2. * Ajax summary query the list of undisclosed Insiders
3. * Department compliance risk control specialists collect and query
4. */
5. Public String ajaxgatherinsiderlist (){
6. // Query related business data
7. Return success;
8. }