ajaxcsrfphp,JQueqyAjax的使用(POST\GET请求csrf_token)

一&＃xff0c;Ajax GET请求和POST请求知识点

1&＃xff0c;GET请求不用添加 {% csrf_token%}  ,也不会报csrftoken的错

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

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

二&＃xff0c;以下是代码示例

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

1

2

3

4

5

6

7

8

9

10

11

12 {% csrf_token %}13 &＃43;14 &＃61;15

16

17

18

19

20

21 xxxxxxxxxxxx

22

23

24

25

26 //添加点击事件&＃xff0c;定义回调函数&＃xff0c;当点击#b1元素时&＃xff0c;则执行函数

27 $("#b1").on("click",function() {28 $.ajax({29 url:"/ajax_add/",//要跳转到哪里&＃xff0c;所以就没有必要再使用form表单的跳转和提交了

30 type:"GET",//可以使用POST&＃xff0c;或GET都可以

31 data:{"i1":$("#i1").val(),"i2":$("#i2").val()},//使用jquery获取DOM元素的值&＃xff0c;并传递到后端

32 success:function(data) {//发送AJAX请坟成功后&＃xff0c;执行回调函数&＃xff0c;data则是获取的后端数据&＃xff0c;

33 $("#i3").val(data);//给DOM元素设置值

34 }35 })36 })37 //jquery ajax使用 POST方法提交&＃xff0c;则必须把CSRF_TOKEN也传递到服务器(这样才是完全和form表单提交的方式一样)

38 //如果是使用get方法提交&＃xff0c;则就不需要csrf_token,

39 $("#b2").on("click",function() {40 //找到页面上的CSRF_TOKEN&＃xff0c;name属性值应该都一样&＃xff0c;

41 //使用jquery语法&＃xff0c;根据name属性找到元素&＃xff0c;再使用val方法获取值

42 varcsrfToken&＃61;$("[name&＃61;&＃39;csrfmiddlewaretoken&＃39;]").val();43 $.ajax({44 url:"/ajax_add2/",//要跳转到哪里&＃xff0c;所以就没有必要再使用form表单的跳转和提交了

45 type:"POST",//可以使用POST&＃xff0c;或GET都可以

46 //使用jquery获取DOM元素的值&＃xff0c;并传递数据到后端

47 data:{"i1":$("#i1").val(),"i2":$("#i2").val(),&＃39;csrfmiddlewaretoken&＃39;:csrfToken},48 success:function(data) {//发送AJAX请坟成功后&＃xff0c;执行回调函数&＃xff0c;data则是获取的后端数据&＃xff0c;

49 $("#i3").val(data);//给DOM元素设置值

50 }51 })52 })53 //以下事件是点击后使用&＃xff0c;使用jqurey创建一个IMG标签&＃xff0c;并添加上&＃xff0c;

54 $(&＃39;#b3&＃39;).on(&＃39;click&＃39;,function(){55 $.ajax({56 //url:&＃39;/test/&＃39;,

57 //type:&＃39;get&＃39;,

58 success:function(a){59 //在页面上创建一个标签

60 varmyimg&＃61;$("").attr(&＃39;src&＃39;,&＃39;/static/1.jpg&＃39;);61 $(&＃39;#d1&＃39;).append(myimg);62 }63 })64 })65

66

67

68