知识 分享 互助 懒人建站

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

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    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插件的情况下我们可以像下面代码来提交表单:
    //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.js由懒人建站收集整理,您可以自由传播,请主动带上本文链接

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

    jquery提交form表单插件jquery.form.js-最新评论