目录
1、django基于form表单post请求，页面会刷新，如果有用到csrftoken需要在form表单中加入{% csrf_token %}
1、django基于ajax发送post请求，页面不会刷新，偷偷提交，如果有用到csrftoken需要在form表单中加入{% csrf_token %}
1、form表单提交数据
1、django基于form表单post请求，页面会刷新，如果有用到csrftoken需要在form表单中加入{% csrf_token %}
2、form表单提交格式（html）
<form ...>
{% csrf_token %} <input type='hidden' value='xxxxxxxx' />
<input ... />
<input type='submit' />
</form>3、注意事项：
1、只有post方式才有csrftoken验证
2、该方式csrftoken验证是放在请求体中
3、form表单提交数据页面刷新
2、ajax提交数据
1、django基于ajax发送post请求，页面不会刷新，偷偷提交，如果有用到csrftoken需要在form表单中加入{% csrf_token %}
2、ajax提交格式（html）
<form>
{% csrf_token %}
<input ... />
<input type='button' />
</form>3、注意事项：
1、ajax请求，form表单不要用submit，因为submit提交会刷新页面
2、只有post方式才有csrftoken验证
3、该方式csrftoken验证可以放在请求头也可以放在请求体中
3、ajax提交页面不会刷新，偷偷提交
4、ajax方式（基于jquery）
1、csrftoken放在请求头中，post请求
#基于jquery实现ajax请求，放在csrftoken放在请求头中
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
$.ajax({
url:"...",
type:"get"
data:{user:"wupeiqi",pwd:"xxxx"}，
header:{
"X-HTTP...":"cookie中写的那段值"
},
dataType: "JSON",
success:function(arg){
}
})2、为了方便后期使用，将csrftoken单独放在请求头中，单独写一个js代码来提取csrftoken，示例：/js/csrf.js文件
/**
* 根据cookie的name获取对应的值
* @param name
* @returns {null}
*/
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
#定义方法判断是否bu是post，put请求
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
#在发送ajax请求之前添加csrftoken到请求头中
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFTOKEN", getCookie('csrftoken'));
}
}
})
后续发送ajax请求：需要导入文件
#导入写好的代码，将csrftoken提取到请求头中
<script src="{% static 'js/csrf.js' %}"></script>2、csrftoken放在请求体中，post请求
#基于jquery实现ajax请求，放在csrftoken放在请求头中
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
$.ajax({
url:"...",
type:"get"
data: $("#smsForm").serialize()，#将整个form表单的数据整体提交
header:{
"X-HTTP...":"cookie中写的那段值"
},
dataType: "JSON",
success:function(arg){
}
})3、基于js跳转页面
location.href = /xxxx/xxx/;4、ajax发送整个表单数据
#先定位到该表单，在serialize()
data: $("#smsForm").serialize()5、js代码发送ajax请求的回调函数
success: function (res) {
if (res.status) {
location.reload();
} else {
$.each(res.detail, function (k, v) {
console.log(k, v)
$("#id_" + k).next().text(v[0])
})
}