ajax 上传form表单 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap.css">
</head>
<body>
<div style="text-align: justify-all">
    <p>
    <h1>欢迎登录</h1>
    </p>
    <form  id="fm" class="form-horizontal" action="/login2.html" method="post" enctype="multipart/form-data" novalidate>
        {% csrf_token %}
        <div class="form-group">
            <label for="id_username" class="col-sm-2 control-label">姓名:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="username" id="id_username" placeholder="请输入用户名">
            </div>
        </div>


        <div class="form-group">
            <label for="id_password" class="col-sm-2 control-label">密码:</label>
            <div class="col-sm-4">
                <input type="password" class="form-control" name="password" id="id_password" placeholder="请输入密码">
            </div>
            <span style="color: red;">{{ form.password1.errors.0 }}</span>
        </div>
        <div class="form-group">
            <label for="id_rmb" class="col-sm-2 control-label"></label>
            <div class="col-sm-4">
                <input type="checkbox" id="id_rmb" name="rmb" value="1">
                <label for="id_rmb">一个月免登录</label>
            </div>
        </div>
        <div class="form-group">
            <label for="id_check_code" class="col-sm-2 control-label">验证码:</label>
            <div class="col-sm-1">
                <input type="text" class="form-control" name="check_code" id="id_check_code">
            </div>
            <div class="col-sm-5">
                <img id="check_code_img" src="/check_code.html">
            </div>

        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" id="sub_data" class="btn btn-default">提交</button>
                <span id="error_msg" style="color: red;">{{ result.message }}</span>
            </div>

        </div>
    </form>
    <script src="/static/plugin/js/jquery-3.1.1.js"></script>
    <script>
        $(function () {
            BindSubData();
        });
        function BindSubData() {
            $("#sub_data").click(function () {
                $.ajax({
                url:"/login2.html",
                type:"POST",
                dataType:"JSON",
                data:$("#fm").serialize(),          #序列化所有的form表单数据
                success:function (arg) {
                    if(arg.status){
                        window.location.href='/base.html';
                    }
                    else{
                        $("#error_msg").text(arg.message);
                        var $img=$("#check_code_img")[0];
                        $img.src=$img.src + '?';
                        $("#id_password,#id_check_code_img").val('');
                    }
                }

            })

            });

        }
    </script>

</div>

</body>
</html>
<script>
    $(function () {
        BindSubData();
    });
    function BindSubData() {
                #写在这里读不到value 
        $('#sub_data').click(function () {
            var form_data=new FormData($("#fm")[0]);           #必须写在click 的函数里面
            $.ajax(
                {
                    url:'/login2.html',
                    type:"POST",
                    data:form_data,
                    dataType:"JSON",
                    cache:false,
                    processData:false,
                    contentType:false,
                    success:function (arg) {
                        if(arg.status){
                            window.location.href="/base.html";
                        }
                        else{
                            $("#error_msg").text(arg.message);
                            var $img=$("#check_code_img")[0];
                            $img.src=$img.src + "?";
                            $("#id_password,#id_check_code").val('');
                        }
                    }

                }
            )
        })

    }

 

posted @ 2018-11-30 16:28  986428528  阅读(213)  评论(0)    收藏  举报