jQuery表单插件

jQuery表单插件

Form有两个核心方法--ajaxForm()和ajaxSubmit()

下载地址：http://malsup.com/jquery/form#download

代码实例：

<script src="jquery.js" type="text/javascript"></script>

<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 action="demo.php" method="post">名称：<input type="text" name="name"/><br/>地址：<input type="text" name="address"/><br/><input type="submit" value="提交"/><br/><div ></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秒后，跳出请求。}

提交前的回调函数showRequest

function showRequest(formData, jqForm, options) {

var queryString = $.param(formData);

return true;}

formData: 提交数据的数组对象

jqForm: 一个jquery对象，封装了表单元素。

var formElement = jqForm[0];

var address = formElement.address.value;

在这个回调函数中，只要不返回false, 表单都将被允许提交; 如果返回false,则会阻止表单提交。 利用这点可进行提交前的表单验证。

提交后的回调函数showResponse

function showResponse(responseText, statusText) {

alert('状态：'+statusText + '\n 返回的内容是：\n'+responseText);

}

statusText： 只返回一个状态如: success, error等。

responseText：携带服务器返回的数据内容。

当返回是xml时

$('#xmlForm').ajaxForm({

dataType: 'xml',

success: processXml

});

function processXml(responseXML) {

var name = $('name', responseXML).text();

var address = $('address', responseXML).text();

#('#xmlOut').html(name + " " + address);

}