HTML中不同方式提交Form的区别

1、Submit提交不包括文件的Form

1.1、RequestHeaders　

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 226
Content-Type: application/x-www-form-urlencoded
Cookie: csrftoken=bXNrfE0mPP3yGpLmp7mSfI8ugLiYGSdGzlhYqfwN3mgCUPWWUyuJDmIvW1ahYxeU
Host: 127.0.0.1:8006
Origin: http://127.0.0.1:8006
Pragma: no-cache
Referer: http://127.0.0.1:8006/register/
Upgrade-Insecure-Requests: 1

1.2、Form Data

csrfmiddlewaretoken: r2tAgQyjVs50MPi97nmlXPt0SiH5jdtrPqX7rr4K9Zi40ftJCOuclt31yyzoBSuF
email: 123@163.com
phone: 1112321313
username: root
nickname: fawfewaf
password: 12222222222222222222222
repassword: 21222222222222222222223

2、Submit提交包括文件的Form

2.1、设置enctype

<form action="/register_file/" method="post" novalidate class="form-horizontal reg-form" enctype="multipart/form-data">
</form>

 

2.2、RequestHeaders

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 995894
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryxIZmJLOPhZDl3xjz
Cookie: csrftoken=bXNrfE0mPP3yGpLmp7mSfI8ugLiYGSdGzlhYqfwN3mgCUPWWUyuJDmIvW1ahYxeU
Host: 127.0.0.1:8006
Origin: http://127.0.0.1:8006
Pragma: no-cache
Referer: http://127.0.0.1:8006/register_file/
Upgrade-Insecure-Requests: 1

3、AJAX提交不包括文件的Form

3.1、HTML中jquery代码

<script>
    // AJAX提交注册数据
    $("#reg-submit").click(function () {
        var email = $("#id_email").val();
        var phone = $("#id_phone").val();
        var username = $("#id_username").val();
        var nickname = $("#id_nickname").val();
        var password = $("#id_password").val();
        var repassword = $("#id_repassword").val();

        $.ajax({
            url: '/register_ajax_nofile/',
            type: 'post',
            data: {
                email: email,
                phone: phone,
                username: username,
                nickname: nickname,
                password: password,
                repassword: repassword,
                csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val()

            },
            success: function (data) {
                if (data.status == 1) {
                    // 有错误就展示错误
                    {#console.log(data.msg);#}
                    $.each(data.msg, function (k, v) {
                        console.log(k, v);
                        $('#id_' + k).next("span").text(v[0]).parent().parent().addClass("has-error");
                    });
                } else if (data.status == 2) {
                    $('#other_error').text(data.msg);
                    $('#id_email').parent().parent().addClass("has-error");
                    $('#id_username').parent().parent().addClass("has-error");
                }
                else {
                    // 没错误就跳转
                    {#console.log("chengg");#}
                    {#console.log(data.msg);#}
                    location.href = data.msg;
                }
            }
        })
    });

    // 将所有的input框绑定获取焦点的事件，将所有的错误信息清空
    $("form input").focus(function () {
        $(this).next().text("").parent().parent().removeClass("has-error");
    })
</script>

View Code