表单提交相关小结

表单提交在使用的时候经常出现一些问题,经常混淆,现在有必要做一个小结整理一下使用方法了

1.type = submit 同步提交

        <form id="form" action="/Form/Save" method="post">
　　　　　　　<input type="text" name="username">
            <input type="submit" id="tijiao" name="name" value="submit" />
        </form>

2.在form标签中用onsubmit属性添加表单提交前验证

注意:return check()后可以没有分好,但是check()必须是全局函数,不要放在$(document).ready()中

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script>
        function dosomething() {
            //做一些验证
            return false;
        }
        function check() {
            if (dosomething() == true) {
                return true;
            } else {
                return false;
            }
        }
    </script>
</head>
<body>
    <div>
        <form id="form" action="/Form/Save" method="post" onsubmit="return check()">
            <input type="text" name="username">
            <input type="submit" id="tijiao" name="name" value="submit" />
        </form>
    </div>
</body>
</html>

3.给type = submit添加click事件进行提交前验证

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script>
        function dosomething() {
            //做一些验证
            return true;
        }
        function check() {
            if (dosomething() == true) {
                return true;
            } else {
                return false;
            }
        }
    </script>
</head>
<body>
    <div>
        <form id="form" action="/Form/Save" method="post">
　　　　　　　<input type="text" name="username">
            <input type="submit" id="tijiao" name="name" value="submit" />
        </form>
    </div>
    <script>
        $(document).ready(function () {
            $('#tijiao').click(function () {
                if (check() == true) {
                    return true;
                } else {
                    return false;
                }
            })
        })
    </script>
</body>
</html>

4.给type = button添加click事件进行提交前验证

注意:基本用法与 type = submit基本相同,不同的是,验证完不会自动提交

要添加$('#form').submit()

又要注意了,在使用$('#form').submit()方法时,表单中不能出现 name = submit ,id = submit

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script>
        function dosomething() {
            //做一些验证
            return true;
        }
        function check() {
            if (dosomething() == true) {
                return true;
            } else {
                return false;
            }
        }
    </script>
</head>
<body>
    <div>
        <form id="form" action="/Form/Save" method="post">
　　　　　　　<input type="text" name="username">
            <input type="button" id="tijiao" name="name" value="submit" />
        </form>
    </div>
    <script>
        $(document).ready(function () {
            $('#tijiao').click(function () {
                if (check() == true) {
                    return true;
                } else {
                    return false;
                }
                $('#form').submit();
            })
        })
    </script>
</body>
</html>

5.ajax异步提交序列化表单数据

有的时候,需要异步提交,但是data中的参数列很多的时候

通过 $('#form').serialize()获取表单数据

　　$.ajax({
　　　　type: 'post',
　　　　url: '/Form/Save',
　　　　data: $('#form').serialize(),
　　　　success: function (result) {
　　　　　　if (result.successed) {
　　　　　　history.go(0);
　　　　}

　　}

6.ajax同步提交获取返回结果

有的时候,我们需要获取等待success的操作结果

注意:jquery.ajax方法async默认是true异步提交的,等待操作结果时需要设置为false

在success方法中return true 或者 false是无效的

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
</head>
<body>
    <div>
        <form id="form" action="/Form/Save" method="post">
　　　　　　　<input type="text" name="username">
            <input name="submit" value="" />
            <input type="button" id="tijiao" name="name" value="submit" />
        </form>
    </div>
    <script>
        $(document).ready(function () {
            function syncAjax(){
                var ret;
                $.ajax({
                    type: 'post',
                    async: false,
                    url: '/Form/Save',
                    data: $('#form').serialize(),
                    success: function (result) {
                        if (result.successed) {
                            //DoSomeThing

                            //
                            ret = false;
                        }
                    }
                })
                return ret;
            }
            $('#tijiao').click(function () {
                var ret = syncAjax();
            })
        })
    </script>
</body>
</html>

表单提交相关小结

推荐阅读