使用jquery插件jquery.form.js，异步提交表单 1-CSDN博客

Quick Start Guide

1Add a form to your page. Just a normal form, no special markup required:

<formid="myForm"action="comment.php"method="post">
Name:<inputtype="text"name="name"/>
Comment:<textareaname="comment"></textarea>
<inputtype="submit"value="SubmitComment"/>
</form>

2Include jQuery and the Form Plugin external script files and a short script to initialize the form when the DOMis ready:

<html>
<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<scriptsrc="http://malsup.github.com/jquery.form.js"></script>

<script>
//waitfortheDOMtobeloaded
$(document).ready(function(){
//bind'myForm'andprovideasimplecallbackfunction
$('#myForm').ajaxForm(function(){
alert("Thankyouforyourcomment!");
});
});
</script>
</head>
...

That's it!

When this form is submitted thenameandcommentfields will be posted tocomment.php. If the server returns a success status then the user will see a "Thank you" message.

2.code Example

处理json

<formid="jsonForm"action="json-echo.php"method="post">
Message:<inputtype="text"name="message"value="HelloJSON"/>
<inputtype="submit"value="EchoasJSON"/>
</form>

JavaScript:

//preparetheformwhentheDOMisready
$(document).ready(function(){
//bindformusingajaxForm
$('#jsonForm').ajaxForm({
//dataTypeidentifiestheexpectedcontenttypeoftheserverresponse
dataType:'json',

//successidentifiesthefunctiontoinvokewhentheserverresponse
//hasbeenreceived
success:processJson
});
});

Callback function

functionprocessJson(data){
//'data'isthejsonobjectreturnedfromtheserver
alert(data.message);
}

处理xml

<formid="xmlForm"action="xml-echo.php"method="post">
Message:<inputtype="text"name="message"value="HelloXML"/>
<inputtype="submit"value="EchoasXML"/>
</form>

JavaScript:

//preparetheformwhentheDOMisready
$(document).ready(function(){
//bindformusingajaxForm
$('#xmlForm').ajaxForm({
//dataTypeidentifiestheexpectedcontenttypeoftheserverresponse
dataType:'xml',

//successidentifiesthefunctiontoinvokewhentheserverresponse
//hasbeenreceived
success:processXml
});
});

Callback function

functionprocessXml(responseXML){
//'responseXML'istheXMLdocumentreturnedbytheserver;weuse
//jQuerytoextractthecontentofthemessagenodefromtheXMLdoc
varmessage=$('message',responseXML).text();
alert(message);
}

处理html

JavaScript:

//preparetheformwhentheDOMisready
$(document).ready(function(){
//bindformusingajaxForm
$('#htmlForm').ajaxForm({
//targetidentifiestheelement(s)toupdatewiththeserverresponse
target:'#htmlExampleTarget',

//successidentifiesthefunctiontoinvokewhentheserverresponse
//hasbeenreceived;hereweapplyafade-ineffecttothenewcontent
success:function(){
$('#htmlExampleTarget').fadeIn('slow');
}
});
});