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>

 

3.2、RequestHeaders

Accept: */*
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: 218
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
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_ajax_nofile/
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
X-Requested-With: XMLHttpRequest

 

3.3、Form Data

email: 123@163.com
phone: 1112321313
username: root
nickname: fawfewaf
password: 2133333333333333333333
repassword: 331122222222222222222
csrfmiddlewaretoken: 39G9o4V2vP4pnpeqC4kujr9XBhXUVysPrxaGzFrtJmhtBPp07vslH5JYhxPdddt3

 

4、AJAX提交包括文件的Form

4.1、HTML中JavaScript代码

<script>

    // 找到头像的input标签绑定change事件
    $("#id_avatar").change(function () {
        // 1. 创建一个读取文件的对象
        var fileReader = new FileReader();
        // 取到当前选中的头像文件
        // console.log(this.files[0]);
        // 读取你选中的那个文件
        fileReader.readAsDataURL(this.files[0]);  // 读取文件是需要时间的
        fileReader.onload = function () {
            // 2. 等上一步读完文件之后才 把图片加载到img标签中
            $("#avatar-img").attr("src", fileReader.result);
        };
    });

    // AJAX提交注册数据
    $("#reg-submit").click(function () {
        var formData = new FormData();

        formData.append("email", $("#id_email").val());
        formData.append("phone", $("#id_phone").val());
        formData.append("username", $("#id_username").val());
        formData.append("nickname", $("#id_nickname").val());
        formData.append("password", $("#id_password").val());
        formData.append("repassword", $("#id_repassword").val());
        formData.append("avatar", $('#id_avatar')[0].files[0]);
        formData.append("csrfmiddlewaretoken", $('[name="csrfmiddlewaretoken"]').val());

        $.ajax({
            url: '/register_ajax_file/',
            type: 'post',
            processData: false,  // 告诉jQuery不要处理我的数据
            contentType: false,  // 告诉jQuery不要设置content类型
            data: formData,
            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().attr("class", "has-error");
                    $('#id_username').parent().parent().attr("class", "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>

 

4.2、RequestHeaders

Accept: */*
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: 699377
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryY2vtwPzBB4IHfuAV
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_ajax_file/
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
X-Requested-With: XMLHttpRequest

 

4.3、Form Data

email: 123@163.com
phone: 1112321313
username: root
nickname: fawfewaf
password: 2111111111111111111111
repassword: 1111222222222222
avatar: (binary)
csrfmiddlewaretoken: 59dTDvSiImYwlCBgRjRZ0tD8bWck3NAwtxHqO6oJWTbAz2MQmKZQo7d9Rc4DlsBK

 

5、区别

提交方式	是否有上传文件	Content-Type
Form提交	没有	application/x-www-form-urlencoded
Form提交	有	multipart/form-data
Ajax提交	没有	application/x-www-form-urlencoded
Ajax提交	有	multipart/form-data