JQueqy Ajax的使用(POST请求)

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

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

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

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

二，以下是代码示例

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>AJAX局部刷新实例</title>
 8 </head>
 9 <body>
10   <!-- 说明，csrf_token其实就是一个input框 ，类型为"hiddent"即隐藏的，如下注释的代码 -->
11   <!-- <input type="hidden" name="csrfmiddlewaretoken" value="IQlJvU6mRj3yKXP5YNV3ABZutgHOa546M04dysyQEBNGJ2euDogA8OX0vyLEiy12"> -->
12   {% csrf_token %}
13 <input type="text" id="i1">+
14 <input type="text" id="i2">=
15 <input type="text" id="i3">
16 <input type="button" value="AJAX提交1" id="b1">
17 <input type="button" value="AJAX提交2" id="b2">
18 <!-- 本次代码新增一个按扭 -->
19 <input type="button" id="b3" value="哥达">
20 <hr>
21 <h1 id="d1">xxxxxxxxxxxx</h1>
22 <!-- 以下是导入JQUERY -->
23 <script src="/static/jquery-3.3.1.js"></script>
24 <!-- 以下是使用jquery版的ajax请求 -->
25 <script>
26 // 添加点击事件，定义回调函数，当点击#b1元素时，则执行函数
27   $("#b1").on("click", function () {
28     $.ajax({
29       url:"/ajax_add/", // 要跳转到哪里，所以就没有必要再使用form表单的跳转和提交了
30       type:"GET",  //可以使用POST，或GET都可以
31       data:{"i1":$("#i1").val(),"i2":$("#i2").val()},  //使用jquery获取DOM元素的值，并传递到后端
32       success:function (data) {   //发送AJAX请坟成功后，执行回调函数，data则是获取的后端数据，
33         $("#i3").val(data);   //给DOM元素设置值
34       }
35     })
36   })
37   // jquery ajax使用 POST方法提交，则必须把CSRF_TOKEN也传递到服务器（这样才是完全和form表单提交的方式一样）
38   // 如果是使用get方法提交，则就不需要csrf_token,
39   $("#b2").on("click", function () {
40     // 找到页面上的CSRF_TOKEN，name属性值应该都一样，
41     // 使用jquery语法，根据name属性找到元素，再使用val方法获取值
42     var csrfToken = $("[name='csrfmiddlewaretoken']").val();
43     $.ajax({
44       url:"/ajax_add2/", // 要跳转到哪里，所以就没有必要再使用form表单的跳转和提交了
45       type:"POST",  //可以使用POST，或GET都可以
46       //使用jquery获取DOM元素的值，并传递数据到后端
47       data:{"i1":$("#i1").val(),"i2":$("#i2").val(),'csrfmiddlewaretoken':csrfToken},
48       success:function (data) {   //发送AJAX请坟成功后，执行回调函数，data则是获取的后端数据，
49         $("#i3").val(data);   //给DOM元素设置值
50       }
51     })
52   })
53 //以下事件是点击后使用，使用jqurey创建一个IMG标签，并添加上，
54   $('#b3').on('click',function(){
55       $.ajax({
56         // url:'/test/',
57         // type:'get',
58         success:function(a){
59           //在页面上创建一个标签
60           var myimg=$("<img>").attr('src','/static/1.jpg');
61           $('#d1').append(myimg);
62         }
63       })
64   })
65 
66 </script>
67 </body>
68 </html>

index.html

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    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_literals

from django.shortcuts import render
from 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   <!-- 说明，csrf_token其实就是一个input框 ，类型为"hiddent"即隐藏的，如下注释的代码 -->
2   <!-- <input type="hidden" name="csrfmiddlewaretoken" value="IQlJvU6mRj3yKXP5YNV3ABZutgHOa546M04dysyQEBNGJ2euDogA8OX0vyLEiy12"> -->

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

JQueqy Ajax的使用(POST请求)

猜你喜欢