1、Submit提交不包括文件的Form
1.1、RequestHeaders
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8Accept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9,en;q=0.8Cache-Control: no-cacheConnection: keep-aliveContent-Length: 226Content-Type: application/x-www-form-urlencodedCookie: csrftoken=bXNrfE0mPP3yGpLmp7mSfI8ugLiYGSdGzlhYqfwN3mgCUPWWUyuJDmIvW1ahYxeUHost: 127.0.0.1:8006Origin: http://127.0.0.1:8006Pragma: no-cacheReferer: http://127.0.0.1:8006/register/Upgrade-Insecure-Requests: 1
1.2、Form Data
csrfmiddlewaretoken: r2tAgQyjVs50MPi97nmlXPt0SiH5jdtrPqX7rr4K9Zi40ftJCOuclt31yyzoBSuFemail: 123@163.comphone: 1112321313username: rootnickname: fawfewafpassword: 12222222222222222222222repassword: 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.8Accept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9,en;q=0.8Cache-Control: no-cacheConnection: keep-aliveContent-Length: 995894Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryxIZmJLOPhZDl3xjzCookie: csrftoken=bXNrfE0mPP3yGpLmp7mSfI8ugLiYGSdGzlhYqfwN3mgCUPWWUyuJDmIvW1ahYxeUHost: 127.0.0.1:8006Origin: http://127.0.0.1:8006Pragma: no-cacheReferer: 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, brAccept-Language: zh-CN,zh;q=0.9,en;q=0.8Cache-Control: no-cacheConnection: keep-aliveContent-Length: 218Content-Type: application/x-www-form-urlencoded; charset=UTF-8Cookie: csrftoken=bXNrfE0mPP3yGpLmp7mSfI8ugLiYGSdGzlhYqfwN3mgCUPWWUyuJDmIvW1ahYxeUHost: 127.0.0.1:8006Origin: http://127.0.0.1:8006Pragma: no-cacheReferer: 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.36X-Requested-With: XMLHttpRequest
3.3、Form Data
email: 123@163.comphone: 1112321313username: rootnickname: fawfewafpassword: 2133333333333333333333repassword: 331122222222222222222csrfmiddlewaretoken: 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, brAccept-Language: zh-CN,zh;q=0.9,en;q=0.8Cache-Control: no-cacheConnection: keep-aliveContent-Length: 699377Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryY2vtwPzBB4IHfuAVCookie: csrftoken=bXNrfE0mPP3yGpLmp7mSfI8ugLiYGSdGzlhYqfwN3mgCUPWWUyuJDmIvW1ahYxeUHost: 127.0.0.1:8006Origin: http://127.0.0.1:8006Pragma: no-cacheReferer: 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.36X-Requested-With: XMLHttpRequest
4.3、Form Data
email: 123@163.comphone: 1112321313username: rootnickname: fawfewafpassword: 2111111111111111111111repassword: 1111222222222222avatar: (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 |
HTML中不同方式提交Form的区别
原文地址：https://www.cnblogs.com/bad-robot/p/9759695.html