欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

jQuery.form.js使用 有大用 有大大用

jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传。 本站下载

下载地址

百度云:http://pan.baidu.com/s/1eQoYE46

360云:http://yunpan.cn/Qi7B5wdiewUMP  访问密码 06b6

微云:http://url.cn/QMQ79w

 View Code

API

ajaxForm增加所有需要的事件监听器,为ajax提交表单做准备。ajaxForm并不能提交表单。在document的ready函数中,使用ajaxForm来为ajax提交表单进行准备。接受0个或1个参数。参数可以是一个回调函数,也可以是一个Options对象。$("#formid").ajaxForm();
ajaxSubmit使用ajax提交表单。接受0个或1个参数。参数可以是一个回调函数,也可以是一个Options对象。

$("#formid").ajaxSubmit();

$("#formid").submit(function(){

    $(this).ajaxSubmit();

    return false;

});

formSerialize将表单串行化(或序列化)为一个查询字符串。这个方法将返回以下格式的字符串:name1=value1&name2=value2。$("#formid").formSerialize();
fieldSerialize将表单的字段元素串行化(或序列化)为一个查询字符串。当只有部分表单字段需要进行串行化(或序列化)时,使用这个就很方便了。返回以下格式的字符串:name=value1&name2=value2。$("#formid .specialFields").fieldSerialize();
fieldValue返回匹配插入数组中的表单元素值。该方法以数组的形式返回数据。如果元素值被判定可能无效,则数组为空。$("#formid :password").fieldValue();
resetForm将表单恢复到初始状态。$("#formid").resetForm();
clearForm清除表单元素。该方法将所有的text、password、textarea置空,清除select元素中的选定,以及所有radio按钮和checkbox按钮重置为非选定状态。$("#formid").clearForm();
clearFields清除字段元素。只有部分表单元素需要清除时方便使用。$("#formid .specialFields").clearFields();

Options对象

ajaxForm和ajaxSubmit都支持众多的选项参数,这些选项参数可以使用一个Options对象来提供。

target指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串、一个jquery对象、一个DOM元素。默认值:null
url指定提交表单数据的URL。默认值:表单的action属性值
type指定提交表单数据的方法(method):“GET”或“POST”。默认值:GET
beforeSubmit表单提交前被调用的回调函数。如果回调函数返回false表单将不被提交。回调函数带三个调用参数:数组形式的表单数据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。默认值:null
success表单成功提交后调用的回调函数。然后dataType选项值决定传回responseText还是responseXML的值。默认值:null
dataType返回的数据类型:null、"xml"、"script"、"json"其中之一。默认值:null
resetForm表示如果表单提交成功是否进行重置。默认值:null
clearForm表示如果表单提交成功是否清除表单数据。默认值:null
复制代码
var options={
    target : '#output',    // 把服务器返回的内容放入id为output的元素中
    beforeSubmit : showRequest,    // 提交前的回调函数
    success : showResponse,    // 提交后的回调函数
    // url : url,    //默认是form的action,如果申明,则会覆盖
    // type : type,    // 默认值是form的method("GET" or "POST"),如果声明,则会覆盖
    // dataType : null,    // html(默认)、xml、script、json接受服务器端返回的类型
    // clearForm : true,    // 成功提交后,清除所有表单元素的值
    // resetForm : true,    // 成功提交后,重置所有表单元素的值
    timeout : 3000    // 限制请求的时间,当请求大于3秒后,跳出请求
}
function showRequest(formData, jqForm, options){
    // formData: 数组对象,提交表单时,form插件会以ajax方式自动提交这些数据,格式如[{name:user,value:val},{name:pwd,value:pwd}]
    // jqForm: jQuery对象,封装了表单的元素
    // options: options对象
    var queryString=$.param(formData); // name=1&address=2
    var formElement=jqForm[0]; // 将jqForm转换为DOM对象
    var address=formElement.address.value; // 访问jqForm的DOM元素
    return true; // 只要不返回false,表单都会提交,在这里可以对表单元素进行验证
}
function showResponse(responseText,statusText){
    // dataType=xml
    var name=$("name",responseXML).text();
    var address=$("address",responseXML).text();
    $("#xmlout").html(name+" "+address);
    // dataType=json
    //$("#jsonout").html(data.name+" "+data.address);
//应该是 下成这种样子的吧
$("#jsonout").html(responseText.name+" "+responseText.address);
}
复制代码

来自 http://www.cnblogs.com/sydeveloper/p/3754637.html

 

jquery.form.js实现将form提交转为ajax方式提交的方法

本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法。分享给大家供大家参考。具体分析如下:

这个框架集合form提交、验证、上传的功能。 
这个框架必须和jquery完整版结合,否则使用min则无效。 
原理:利用js进行对form进行组装成ajax的url和data,原理还是用ajax来提交,其实这完全可以自己写,但是有这个框架可能会更简单。

一、最简单例子:

第一步:引用js 

1
2
3
4
<!--这里的min是自己用js压缩工具对完整版进行的压缩
并不是真正的min,所以好使-->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

第二步:页面写form 

1
2
3
4
5
6
7
8
9
<form id="showDataForm"
action="/024pm/f_shopUser.do?method=login" method="post">
 <input type="text" value="" name="name" maxlength="2"/>
 <input type="password" value="" name="password" maxlength="2"/>
 <input type="submit" value="提交"/>
</form>
<div id="output1"
style="width:1000px;height:200px;background-color:#eee;">
</div>

第三步:写js调用jquery.form.js,对form表单进行ajax提交 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$(document).ready(function() {
 var options = {
  target: '#output1',
  // 从服务传过来的数据显示在这个div内部
 也就是ajax局部刷新
  beforeSubmit: showRequest,
 // ajax提交之前的处理
  success:  showResponse
 // 处理之后的处理
 };
 $('#showDataForm').submit(function() {
  $(this).ajaxSubmit(options);
  return false;
  //非常重要,如果是false,则表明是不跳转
  //在本页上处理,也就是ajax,如果是非false,则传统的form跳转。
 });
});
function showResponse(responseText, statusText, xhr, $form) {
 alert(xhr.responseText+"=="+$form.attr("method")+'status: ' +
 statusText + '\n\nresponseText: \n' + responseText);
//xhr:说明你可以用ajax来自己再次发出请求
//$form:是那个form对象,是一个jquery对象
//statusText:状态,成功则为success
//responseText,服务器返回的是字符串(当然包括html,不包括json)
}
function showRequest(formData, jqForm, options) {
 //formData是数组,就是各个input的键值map数组
 //通过这个方法来进行处理出来拼凑出来字符串。
 //formData:拼凑出来的form字符串,比如name=hera&password,
 //其实就是各个表单中的input的键值对,
 //如果加上method=XXXX,那也就是相当于ajax内的data。
 var queryString = $.param(formData);
 alert(queryString+"======"+formData.length);
 for (var i=0; i < formData.length; i++) {
 alert(formData[i].value+"==============="+formData[i].name);
 }
 //jqForm,jquery form对象
 var formElement = jqForm[0];
 alert($(formElement).attr("method"));
 alert($(jqForm[0].name).attr("maxlength"));
 //非常重要,返回true则说明在提交ajax之前你验证
 //成功,则提交ajax form
 //如果验证不成功,则返回非true,不提交
 return true;
}

二、options对象内的值有哪些?

主要的有那么几个常用的属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var options = {
 target: '#output1',
 data:{param1:"我自己的第一个额外的参数"},
//这个参数是指通过ajax来给服务器提交除了form内部input的参数
//在后台中使用String param1=req.getParameter("param1");获取。
 // dataType: null,
 dataType:'json',
//这个参数值的是服务器返回的数据类型,默认的是null
//也就是服务器可以默认返回字符串,然后将这些字符串放在target内部
//当然还有json、xml,其中最常用的便是null和json
//对于json的使用,我们会稍后讲解到
 beforeSubmit: showRequest,
 success:  successRes,
 type:'POST'
 //提交方式,默认是自己在form标签上指定的method
 //如果没有指定,则使用get。
 url:''
 //重新提交的url,即url可以在form中配置
 //也可以在这里配置。
};

三、如何解析服务器传递过来的json数据

我们知道,使用jquery提供的ajax方法,如果服务器传递回来的是json数据,是可以转换为js的json对象,然后可以通过json.xxx来获取相应的值。那么这个框架呢? 
1)首先options参数中指定dataType:'json' 
2)通过框架进行提交 
3)服务器接收 
4)服务器返回json 
5)页面js接收json 
关键是第五步,如何js接收json,是可以通过success: 指定的方法内部进行如下操作: 

1
2
3
4
5
6
7
8
9
10
var options = {
 target: '#output1',
 dataType:'json',
 beforeSubmit: showRequest,
 success:  successRes
//注意了,successRes方法看起来并没有有参数
//但是为何下面的方法就能有参数了呢,是可以这么传递的。
function successRes(jsonData){
 alert(jsonData.param1);
}

四、如何通过这个框架进行简单的验证呢?

说到验证,那肯定是在beforeSubmit的方法内部进行验证的,如何验证,因为这个方法已经将jqform对象,还有formData都传给你了,你可以拿这两个参数进行获取相应的input,然后进行自己的判定,如果判定成功,则提交。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function showRequest(formData, jqForm, options) {
 for (var i=0; i < formData.length; i++) {
 alert(formData[i].value+"========"+formData[i].name);
 if (!formData[i].value) {
  //验证是否填写完整
  alert('input有没有填写的选项');
  //如果验证不通过,则返回false
  return false;
 }
 }
 var formElement = jqForm[0];
 alert($(jqForm[0].name).attr("maxlength"));
 return true;
}

jquery.form.js文件点击此处本站下载

希望本文所述对大家的jQuery程序设计有所帮助。

来自 http://www.jb51.net/article/63628.htm
 

jQuery插件 -- Form表单插件jquery.form.js

 88655人阅读 评论(3) 收藏 举报
 分类:

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能。另外,插件还包括其他的一些方法: formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。

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

核心方法 -- ajaxForm() 和 ajaxSubmit()

 

[javascript] view plain copy  print?
  1. $('#myForm').ajaxForm(function() {     

  2.    $('#output1').html("提交成功!欢迎下次再来!").show();      

  3. });    

  4.          

  5. $('#myForm2').submit(function() {  

  6.    $(this).ajaxSubmit(function() {     

  7.       $('#output2').html("提交成功!欢迎下次再来!").show();      

  8.    });  

  9.    return false//阻止表单默认提交  

  10. });  

通过Form插件的两个核心方法,都可以在不修改表单的HTML代码结构的情况下,轻易地将表单的提交方式升级为Ajax提交方式
ajaxForm() 和 ajaxSubmit() 都能接受0个或1个参数,当为单个参数时,该参数既可以是一个回调函数,也可以是一个options对象,上面的例子就是回调函数,下面介绍options对象,使得它们对表单拥有更多的控制权

 

 

[javascript] view plain copy  print?
  1. var options = {  

  2.    target: '#output',          //把服务器返回的内容放入id为output的元素中      

  3.    beforeSubmit: showRequest,  //提交前的回调函数  

  4.    success: showResponse,      //提交后的回调函数  

  5.    //url: url,                 //默认是form的action, 如果申明,则会覆盖  

  6.    //type: type,               //默认是form的method(get or post),如果申明,则会覆盖  

  7.    //dataType: null,           //html(默认), xml, script, json...接受服务端返回的类型  

  8.    //clearForm: true,          //成功提交后,清除所有表单元素的值  

  9.    //resetForm: true,          //成功提交后,重置所有表单元素的值  

  10.    timeout: 3000               //限制请求的时间,当请求大于3秒后,跳出请求  

  11. }  

  12.   

  13. function showRequest(formData, jqForm, options){  

  14.    //formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}]  

  15.    //jqForm:   jQuery对象,封装了表单的元素     

  16.    //options:  options对象  

  17.    var queryString = $.param(formData);   //name=1&address=2  

  18.    var formElement = jqForm[0];              //将jqForm转换为DOM对象  

  19.    var address = formElement.address.value;  //访问jqForm的DOM元素  

  20.    return true;  //只要不返回false,表单都会提交,在这里可以对表单元素进行验证  

  21. };  

  22.   

  23. function showResponse(responseText, statusText){  

  24.    //dataType=xml  

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

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

  27.    $("#xmlout").html(name + "  " + address);  

  28.    //dataType=json  

  29.    //$("#jsonout").html(data.name + "  " + data.address);  

  30. //应该是下面这种样子的吧

  31.   //$("#jsonout").html(responseText.name + "  " + responseText.address);  

  32. };  

  33.   

  34. $("#myForm").ajaxForm(options);  

  35.   

  36. $("#myForm2").submit(funtion(){  

  37.    $(this).ajaxSubmit(options);  

  38.    return false;   //阻止表单默认提交  

  39. });  

 

表单提交之前进行验证:  beforeSubmit会在表单提交前被调用,如果beforeSubmit返回false,则会阻止表单提交

 

[javascript] view plain copy  print?
  1. beforeSubmit: validate  

  2. function validate(formData, jqForm, options) { //在这里对表单进行验证,如果不符合规则,将返回false来阻止表单提交,直到符合规则为止  

  3.    //方式一:利用formData参数  

  4.    for (var i=0; i < formData.length; i++) {  

  5.        if (!formData[i].value) {  

  6.             alert('用户名,地址和自我介绍都不能为空!');  

  7.             return false;  

  8.         }  

  9.     }   

  10.   

  11.    //方式二:利用jqForm对象  

  12.    var form = jqForm[0]; //把表单转化为dom对象  

  13.       if (!form.name.value || !form.address.value) {  

  14.             alert('用户名和地址不能为空,自我介绍可以为空!');  

  15.             return false;  

  16.       }  

  17.   

  18.    //方式三:利用fieldValue()方法,fieldValue 是表单插件的一个方法,它能找出表单中的元素的值,返回一个集合。  

  19.    var usernameValue = $('input[name=name]').fieldValue();  

  20.    var addressValue = $('input[name=address]').fieldValue();  

  21.    if (!usernameValue[0] || !addressValue[0]) {  

  22.       alert('用户名和地址不能为空,自我介绍可以为空!');  

  23.       return false;  

  24.    }  

  25.   

  26.     var queryString = $.param(formData); //组装数据  

  27.     //alert(queryString); //类似 : name=1&add=2    

  28.     return true;  

  29. }  

来自  http://blog.csdn.net/zzq58157383/article/details/7718956
 

 


    普通分类: