Django 之Ajax请求

最新推荐文章于 2024-08-05 17:18:14 发布

YGR1123打SD

最新推荐文章于 2024-08-05 17:18:14 发布

阅读量730

点赞数

分类专栏： Django 文章标签： Django 之Ajax请求

本文链接：https://blog.csdn.net/qq_38620956/article/details/99617924

版权

Django 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一.简单ajax的应用

ajax是一个与服务器进行交互的技术。
特点：异步不刷新页面数据量小
1. 参数：简单用法

<input type="text" name="ii1">+
<input type="text" name="ii2">=
<input type="text" name="ii3">
<button type="submit" id="b1">计算</button>
<script>
    $("#b1").click(function () {
        $.ajax({
            url:'/ajax/',                     1.请求url
            type:'post',                      2.请求类型          JSON.parse()
            data:{                   3.请求数据:当是一个列表hobby: JSON.stringify(['a', 'b', 'c']) 转换为字符在发送
                i1:$("[name=ii1]").val(),
                i2:$("[name=ii2]").val(),
            },
            success:function (res) {          4.请求成功时被调用,django返回的resposne就是res
                console.log(res);
                $("[name=ii3]").val(res)
            },
            error:function (res) {            5.请求失败时被调用,
                console.log('这是错误的')
            }
        })
    })

二.当要处理csrf_token时的三种用法 CSRF跨站请求伪造

1. 从request.POST中获取csrfmiddlewaretoken对应的值
request_csrf_token = request.POST.get('csrfmiddlewaretoken', '')

所以可以在 ajax 的 post请求数据中添加 csrfmiddlewaretoken这个键值对,django就会自动识别到

csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(),

2. 从请求头中获取X-csrftoken 的值
request_csrf_token = request.META.get(settings.CSRF_HEADER_NAME, '')

ajax 的请求也可以设置请求头有headers这个参数

 headers: {"X-CSRFToken": $('[name="csrfmiddlewaretoken"]').val()},

3.设置全局ajax的请求头

当每一个ajax 都需要设置 headers 时可以新建一个 js设置

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // 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;
} 
var csrftoken = getCookie('csrftoken');              1.获得浏览器的cookie
function csrfSafeMethod(method) {
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({                                         2.设置ajax的headers
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {     3.取反就是post请求时
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});

4.当ajax 处理 redirect 重定向时

当view 中返回一个redirect时 ajax 的sucess函数接受的是一个重定向的网址,所以它会返回重定向后的html源码,而浏览器不会跳转所以在view 需要把重定向网址封装在 {'url': 'www.baidu.com'}字典中,

用ajax 重定向, 在sucess函数中的res就是这个字典添加: location.href=res.url