您的位置：首页 > Web前端 > JQuery

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

2012-10-31 17:35 986 查看

Quick Start Guide

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

<form id="myForm" action="comment.php" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>

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

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

<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
</head>
...

That's it!

When this form is submitted the name and comment fields will be posted to comment.php. If the server returns a success status then the user
will see a "Thank you" message.

2.code Example

处理json

<form id="jsonForm" action="json-echo.php" method="post">
Message: <input type="text" name="message" value="Hello JSON" />
<input type="submit" value="Echo as JSON" />
</form>

JavaScript:

// prepare the form when the DOM is ready
$(document).ready(function() {
// bind form using ajaxForm
$('#jsonForm').ajaxForm({
// dataType identifies the expected content type of the server response
dataType:  'json',

// success identifies the function to invoke when the server response
// has been received
success:   processJson
});
});

Callback function

function processJson(data) {
// 'data' is the json object returned from the server
alert(data.message);
}

处理xml

<form id="xmlForm" action="xml-echo.php" method="post">
Message: <input type="text" name="message" value="Hello XML" />
<input type="submit" value="Echo as XML" />
</form>

JavaScript:

// prepare the form when the DOM is ready
$(document).ready(function() {
// bind form using ajaxForm
$('#xmlForm').ajaxForm({
// dataType identifies the expected content type of the server response
dataType:  'xml',

// success identifies the function to invoke when the server response
// has been received
success:   processXml
});
});

Callback function

function processXml(responseXML) {
// 'responseXML' is the XML document returned by the server; we use
// jQuery to extract the content of the message node from the XML doc
var message = $('message', responseXML).text();
alert(message);
}

处理html

JavaScript:

// prepare the form when the DOM is ready
$(document).ready(function() {
// bind form using ajaxForm
$('#htmlForm').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#htmlExampleTarget',

// success identifies the function to invoke when the server response
// has been received; here we apply a fade-in effect to the new content
success: function() {
$('#htmlExampleTarget').fadeIn('slow');
}
});
});

参考来源：http://malsup.com/jquery/form/#getting-started

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航