郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

博彩评级专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

博彩评级提供网页素材下载、网站模板
这一切都是免费的!
当前位置:博彩评级 > javascript > jquery插件 >

jquery提交form表单插件jquery.form.js

来源:jquery特效 作者: 博彩评级 日期:2015-02-24 人气:
jquery.form.js提交form表单插件提供了表单ajaxe提交解决方案,下面对比一下使用jquery自己的ajax提交和jquery.form的提交由啥不同。通常没有使用jquery.form插件的情况下我们可以像下面代码来提
jquery.form.js提交form表单插件提供了表单ajaxe提交解决方案,下面对比一下使用jquery自己的ajax提交和jquery.form的提交由啥不同。
通常没有使用jquery.form插件的情况下我们可以像下面代码来提交表单:

本文地址:http://www.qqydc.com/js/jquery/jquery.form.html
文章摘要:jquery提交form表单插件jquery.form.js,法庭募捐举目千里,经略悔其少作第一现场。

//jquery ajax 方式提交表单
    var $form = $("#form"),
        action = $form.attr("action");
    $form.on("submit",function(){
        $.post(action,$form.serialize(),function(res){
            //请求成功代码在这里
            alert("提交成功!");
        },'json');
        return false
    });
====================================

//jquery.form.js 的ajax提交表单
$('#form2').submit(function() {
        $(this).ajaxSubmit(function() {
            alert("提交成功!");
        });
        return false; //阻止表单默认提交
    });

jquery.form.js中ajaxSubmit()可以像上面代码一样只传递一个成功的回调函数,也可以传递更多参数,参数如下:
//jquery.form.js 中的ajaxSubmit() 可以是一个回调函数或者是更多参数,如下:
    var options = {
        //url: url,                 //默认是form的action
        //type: type,               //默认是form的method(get or post)
        //dataType: null,           //html(默认), xml, script, json...接受服务端返回的类型
        //clearForm: true,          //成功提交后,清除所有表单元素的值
        //resetForm: true,          //成功提交后,重置所有表单元素的值
        //target: '#output',          //把服务器返回的内容放入id为output的元素中
        //timeout: 3000,               //限制请求的时间,当请求大于3秒后,跳出请求
        //提交前的回调函数
        beforeSubmit: function(formData, jqForm, options){
            //formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}]
            //jqForm:   jQuery对象,封装了表单的元素
            //options:  options对象
            //比如可以再表单提交前进行表单验证
        },
        //提交成功后的回调函数
        success: function(data,status,xhr,$form){},
        error: function(xhr, status, error, $form){},
        complete: function(xhr, status, $form){}
    };

====================
下面我们来一段jquery.form表单提交的实战例子完整代码:
$('#formLogin').on("submit",function() {
//博彩评级整理
        $(this).ajaxSubmit(
            {
                //url: url,                 //默认是form的action
                //type: type,               //默认是form的method(get or post)
                //dataType: "json",           //html(默认), xml, script, json...接受服务端返回的类型
                //clearForm: true,          //成功提交后,清除所有表单元素的值
                //resetForm: true,          //成功提交后,重置所有表单元素的值
                target: '#output',          //把服务器返回的内容放入id为output的元素中
                //timeout: 3000,               //限制请求的时间,当请求大于3秒后,跳出请求
                //提交前的回调函数
                beforeSubmit: function(arr,$form,options){
                    //formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}]
                    //jqForm:   jQuery对象,封装了表单的元素
                    //options:  options对象
                    //比如可以再表单提交前进行表单验证
                    console.log("beforeSubmit",arr,$form,options)
                },
                //提交成功后的回调函数
                success: function(data,status,xhr,$form){
                    console.log("success",data,status,xhr,$form);
                    if(data.Flag){
                        console.log(data.Content)
                    }
                },
                error: function(xhr, status, error, $form){
                    console.log("error",xhr, status, error, $form)
                },
                complete: function(xhr, status, $form){
                    console.log("complete",xhr, status, $form)
                }
            }
        );
        return false; //阻止表单默认提交
    });

查看jquery.form示例

博彩评级整理编辑

本文链接:jquery提交form表单插件jquery.form.jshttp://www.qqydc.com/js/jquery/jquery.form.html

(责任编辑:博彩评级)

jquery提交form表单插件jquery.form.js由博彩评级收集整理,您可以自由传播,请主动带上本文链接

web前端开发就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。