首页 > 程序开发 > web前端 > JavaScript >

jquery插件——form表单插件

2017-01-18

jquery插件——form表单插件。传统的表单提交,都是页面跳转的形式,但是现在更流行ajax提交,那么如果希望有表单提交的简便,也有ajax的效果,有什么解决办法吗?

传统的表单提交,都是页面跳转的形式,但是现在更流行ajax提交,那么如果希望有表单提交的简便,也有ajax的效果,有什么解决办法吗?

怎么使用

两种使用方式:

第一种

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/jquery-form.js"></script>
        <script>
            // 使用ajaxForm
            $(function(){
                $("#myForm").ajaxForm(function(){
                    $("#output1").html("提交成功").show();
                })
            })
        </script>
    </head>
    <body>
        <form id="myForm">
            <input type="text" name="username">
            <input type="text" name="password">
            <input type="submit" value="提交">
            <div id="output1" style="display: none"></div>
        </form>
    </body>
    </html>

第二种方式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/jquery-form.js"></script>
        <script>
            $(function(){
                //方式二 与方式一效果一样
                $("#myForm").submit(function(){
                    // 使用ajaxSubmit
                    $(this).ajaxSubmit(function(){
                        $("#output1").html("提交成功").show();
                    });
                    return false;
                })
            })
        </script>
    </head>
    <body>
        <form id="myForm">
            <input type="text" name="username">
            <input type="text" name="password">
            <input type="submit" value="提交">
            <div id="output1" style="display: none"></div>
        </form>
    </body>
    </html>

感觉上第一种要 更方便一点。

其中的参数function()是提交成功后的回调函数。

利用这种提交方式,可以实现异步表单提交,很方便。但是,还是有点不满足,比如说,我可能想在提交表单之前验证一下,虽然可以手动地在提交表单动作之外完成,但是很麻烦。form插件有没有继承这样的功能呢?

二、options参数

上面只讲了form中的一个function回调函数参数,其实它还有一个参数,就是options。有什么用呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery-form.js"></script>
    <script>

        var options = {
            target:&#39;#output1&#39;,          // 把服务器返回的内容放入id为output1的元素中
            beforeSubmit: fun1,         // 提交前的回调函数
            success:      fun2,         // 提交后的回调函数
            dataType:                   // 接收服务端返回的类型 xml,scrpit,json
        };

        // beforeSubmit前可以作验证
        function fun1(formData,jqForm,options){
            // formData 提交值的数组对象
            // jqForm   表单元素的jQuery对象,jqForm[0]是其dom对象
            // 该函数如果返回false,则阻止表单提交

            // formData可以判断全部不为空的情况
            for(var i=0;i<formData.length;i++){
                if(!formData[i].value){
                    alert("都不能为空");
                    return false;
                }
            }

            // jqForm可以判断某个不为空的情况
            var form = jqForm[0];
            if(!form.name.value){
                alert("name不能为空");
                return false;
            }

            // fieldValue()可以获取多值的数组形式,如checkbox
            var value = $(&#39;input[name=name]&#39;).fieldValue();
            if(!value[0]){
                return false;
            }
        }
        function fun2(responseText, statusText){
            // 根据dataType不同responseText解析方式不同,
            // 默认      responseText
            // xml      responseXml以xml解析
            // json     responseJson
        }

        $(function(){
            //方式二 与方式一效果一样
            $("#myForm").ajaxForm(options); // 要想使options生效,需要作为参数传递
        })
    </script>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username">
        <input type="text" name="password">
        <input type="submit" value="提交">
        <div id="output1" style="display: none"></div>
    </form>
</body>
</html>

可以看出,在beforeSubmit的回调函数fun1中,我们有三种方式获取表单数据

formData,jqForm,fieldValue 满足了各种获取值的方式,想怎么验证怎么验证。只要返回false就能阻止表单提交

sucess回调的fun2也有状态值和服务端的返回数据,想怎么处理怎么处理。

相关文章
最新文章
热点推荐