Jquery form ajax

通过本文的介绍，我们学习了如何使用jQuery通过ajax提交表单。通过ajax可以实现表单的异步提交，提高用户体验。首先，我们为表单绑定提交事件，然后获取表单数据，并使用ajax方法发 .

Overview

The following code controls the HTML form beneath it. It uses to bind the form and demonstrates how to use pre- and post-submit callbacks.

AJAX response will replace this content.

The following code controls the HTML form beneath it. It uses to submit the form.

AJAX response will replace this content.

This page gives several examples of how form data can be validated before it is sent to the server. The secret is in the option. If this pre-submit callback returns false, the submit process is aborted. The following login form is used for each of the examples that follow. Each example will validate that both the usernameand passwordfields have been filled in by the user. Form Markup:First, we initialize the form and give it a callback function - this is the validation function.

Validate Using the Argument

Validate Using the Method

Note

You can find jQuery plugins that deal specifically with field validation on the jQuery Plugins Page.

This page shows how to handle JSON data returned from the server. The form below submits a message to the server and the server echos it back in JSON format.
Form markup:
Server code in: Callback function

This page shows how to handle XML data returned from the server. The form below submits a message to the server and the server echos it back in XML format.
Form markup:
Server code in: Callback function

This page shows how to handle HTML data returned from the server. The form below submits a message to the server and the server echos it back in an HTML div. The response is added to this page in the div below.
Form markup:
Server code in:

htmlExampleTarget (output will be added below):

This page demonstrates the Form Plugin's file upload capabilities. There is no special coding required to handle file uploads. File input elements are automatically detected and processed for you.

Browsers that support the XMLHttpRequest Level 2 will be able to upload files seamlessly and even get progress updates as the upload proceeds. For older browsers, a fallback technology is used which involves iframes since it is not possible to upload files using the level 1 implmenentation of the XMLHttpRequest object. This is a common fallback technique, but it has inherent limitations. The iframe element is used as the target of the form's submit operation which means that the server response is written to the iframe. This is fine if the response type is HTML or XML, but doesn't work as well if the response type is script or JSON, both of which often contain characters that need to be repesented using entity references when found in HTML markup.

To account for the challenges of script and JSON responses when using the iframe mode, the Form Plugin allows these responses to be embedded in a element and it is recommended that you do so for these response types when used in conjuction with file uploads and older browsers.

, otherwise Internet Explorer will prompt the user to download a "file".

Also note that if there is no file input in the form then the request uses normal XHR to submit the form (not an iframe). This puts the burden on your server code to know when to use a textarea and when not to. If you like, you can use the option of the plugin to force it to always use an iframe mode and then your server can always embed the response in a textarea. But the recommended solution is to test for the 'X-Requested-With' request header. If the value of that header is 'XMLHttpRequest' then you know that the form was posted via ajax. The following PHP snippet shows how you can be sure to return content successfully:

The form below provides an input element of type "file" along with a select element to specify the dataType of the response. The form is submitted to which uses the dataType to determine what type of response to return.

Examples that show how to display upload progress: