现在的位置: 首页 > 综合 > 正文

jQuery表单插件

2012年12月15日 ⁄ 综合 ⁄ 共 2018字 ⁄ 字号 评论关闭
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 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秒后,跳出请求。}

 

 

提交前的回调函数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);
}

 

 

 

抱歉!评论已关闭.