项目需要,研究了下JQuery Form这个插件。
利用JQuery Form可以很方便的将已有的同步Form提交方式修改为异步Form提交的方式。提交后通过callback方式,处理结果(可以是json/xml/html等),当然也可以将结果页面直接更新到当前页面指定id的div中。
异步的好处显而易见,即局部刷新页面,加快页面响应速度,进而提高用户的体验。
使用方式颇为简单,一共就以下几个步骤:
1、下载JQuery Form(http://github.com/malsup/form/raw/master/jquery.form.js?v2.43);
2、在主页面中引入jquery.form.js以及jquery.js:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
3、主页面中编写普通的form表单:
<form id="myForm" action="some.action" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>
<div id="output"></div>
4、主页面的js代码:
// prepare the form when the DOM is ready
$(document).ready(function() {
var options = {
target: '#output', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// 将myForm使用 'ajaxForm' 进行绑定
$('#myForm').ajaxForm(options);
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a string to display it
// but the form plugin does this for you automatically when it submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: /n/n' + queryString);
// here we could return false to prevent the form from being submitted;
// returning anything other than false will allow the form submit to continue
return true;
}
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
alert('status: ' + statusText + '/n/nresponseText: /n' + responseText +
'/n/nThe output div should have already been updated with the responseText.');
}