JQueqy Ajax的使用(POST\GET请求 csrf

JQueqy Ajax的使用(POST\GET请求 csrf_token)

阅读量：4591 次

发布时间：2019-06-09

本文共 3529 字，大约阅读时间需要 11 分钟。

一，Ajax GET请求和POST请求知识点

　　1，GET请求不用添加 {% csrf_token%} ,也不会报csrftoken的错

　　2，POST请求的话，就需要添加 {% csrf_token%} 标签，而且要使用$.ajax() 方法，将token传递到服务端

　　3，传递过去就行了，后台自动会处理，无需用手工处理这个token

二，以下是代码示例

以下是index.html代码示例（里面有使用ajax,GET和POST方法的代码示例）

1  2  3  4   
       5   
       6   
       7   AJAX局部刷新实例 8  9 10   
      11   
      12   {% csrf_token %}13 +14 =15 16 17 18 
      19 20 
      
21 xxxxxxxxxxxx
22 
      23 24 
      25 67 68

index.html

from django.conf.urls import urlfrom django.contrib import adminfrom app01 import viewsurlpatterns = [    url(r'^admin/', admin.site.urls),    url(r'^index/$',views.index),    url(r'^ajax_add/$',views.ajax_add),    url(r'^ajax_add2/$',views.ajax_add2),]

urls.py

# -*- coding: utf-8 -*-from __future__ import unicode_literalsfrom django.shortcuts import renderfrom django.http import HttpResponse# Create your views here.def index(request):    return render(request,'index.html')def ajax_add(request):    print (request.GET.get('i1'))    print (request.GET.get('i2'))    i1=int(request.GET.get('i1'))    i2=int(request.GET.get('i2'))    ret=i1+i2    return HttpResponse(ret)def ajax_add2(request):    print (request.POST.get('i1'))    print (request.POST.get('i2'))    i1=int(request.POST.get('i1'))    i2=int(request.POST.get('i2'))    ret=i1+i2    return HttpResponse(ret)

views.py处理ajax请求发过来数据

三，知识点

1   
     2

// jquery ajax使用 POST方法提交，则必须把CSRF_TOKEN也传递到服务器（这样才是完全和form表单提交的方式一样）  // 如果是使用get方法提交，则就不需要csrf_token,

四、使用另一种方式，在ajax POST提交的时候，带上csrf_token

通过获取返回的cookie中的字符串放置在请求头中发送。

注意：需要引入一个jquery.cookie.js插件。

$.ajax({  url: "/cookie_ajax/",  type: "POST",  headers: {"X-CSRFToken": $.cookie('csrftoken')},  // 从Cookie取csrf_token，并设置ajax请求头  data: {"username": "Q1mi", "password": 123456},  success: function (data) {    console.log(data);  }})

或者用自己写一个getCookie方法：

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');function csrfSafeMethod(method) {  // these HTTP methods do not require CSRF protection  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));}$.ajaxSetup({  beforeSend: function (xhr, settings) {    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {      xhr.setRequestHeader("X-CSRFToken", csrftoken);    }  }});

将以上内容放在一个 xxxx.js的文件，然后在ajax提交的html页面里，引入这个xxx.js文件即可，

然后ajax提交里面，就不需要再获取csrfToken的值了，也不需要将此值放在data中传递给django来处理了。

// jquery ajax使用 POST方法提交，则必须把CSRF_TOKEN也传递到服务器（这样才是完全和form表单提交的方式一样）  // 如果是使用get方法提交，则就不需要csrf_token,  $("#b2").on("click", function () {    // 找到页面上的CSRF_TOKEN，name属性值应该都一样，    // 使用jquery语法，根据name属性找到元素，再使用val方法获取值，这里就不再需要了，   // var csrfToken = $("[name='csrfmiddlewaretoken']").val();    $.ajax({      url:"/ajax_add2/", // 要跳转到哪里，所以就没有必要再使用form表单的跳转和提交了      type:"POST",  //可以使用POST，或GET都可以      //使用jquery获取DOM元素的值，并传递数据到后端，这里DATA中，也不再需要将 csrfToken写在data中了，      data:{"i1":$("#i1").val(),"i2":$("#i2").val()},      success:function (data) {   //发送AJAX请坟成功后，执行回调函数，data则是获取的后端数据，        $("#i3").val(data);   //给DOM元素设置值      }    })  })

转载于:https://www.cnblogs.com/2mei/p/9251868.html

你可能感兴趣的文章