Form有两个核心方法--ajaxForm()和ajaxSubmit()
下载地址:http://malsup.com/jquery/form#download
代码实例:
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myForm').ajaxForm(function(){
$('output1').html('提交成功!欢迎下次再来!').show();
})
})
//或者
$('#myForm').submit(function(){
$(this).ajaxSubmit(function(){
$('#output1').html('提交成功!欢迎下次再来!').show();
});
return false; //阻止表单默认提交
}) </script><form id="myForm" action="demo.php" method="post">名称:<input type="text" name="name"/><br/>地址:<input type="text" name="address"/><br/><input type="submit" id="test" value="提交"/><br/><div id="output1" style="display:none;"></div>
方法参数:这两个方法的参数可以是一个回调函数或者是一个options对象。
回调函数如代码所示.
一个options对象定义如下:
var options = { target: '#output1', //将服务器返回的内容放入id为output1的元素中
beforSubmit: showRequest, //提交前的回调函数
success: showResponse, //提交后的回调函数
//url:url, //默认是form的action,如果声明,则会覆盖
//type:type, //默认是form的method('get' or 'post'), 如果声明,则会覆盖
//dataType: null, //'xml', 'script', or 'json'(接受服务端返回的类型。)
//clearForm: true, //成功提交后,清除所有表单元素的值。
//resetForm: true, //成功提交后,重置所有表单元素的值。
//timeout: 3000 //限制请求时间,当请求大于3秒后,跳出请求。}
var queryString = $.param(formData);
return true;}
formData: 提交数据的数组对象
jqForm: 一个jquery对象,封装了表单元素。
var formElement = jqForm[0];
var address = formElement.address.value;
在这个回调函数中,只要不返回false, 表单都将被允许提交; 如果返回false,则会阻止表单提交。 利用这点可进行提交前的表单验证。
function showResponse(responseText, statusText) {
alert('状态:'+statusText + '\n 返回的内容是:\n'+responseText);
}
statusText: 只返回一个状态如: success, error等。
responseText:携带服务器返回的数据内容。
当返回是xml时
dataType: 'xml',
success: processXml
}); function processXml(responseXML) {
var name = $('name', responseXML).text();
var address = $('address', responseXML).text();
#('#xmlOut').html(name + " " + address);
}