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: [email protected] 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: [email protected] 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: [email protected] 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 |
原文地址：https://www.cnblogs.com/bad-robot/p/9759695.html
时间： 2024-10-13 20:08:29