JQueqy Ajax的使用(POST请求)

发布时间：2023-09-06 02:02责任编辑：胡小海关键词：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 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 ??<!-- 说明，csrf_token其实就是一个input框 ，类型为"hiddent"即隐藏的，如下注释的代码 -->2 ??<!-- <input type="hidden" name="csrfmiddlewaretoken" value="IQlJvU6mRj3yKXP5YNV3ABZutgHOa546M04dysyQEBNGJ2euDogA8OX0vyLEiy12"> -->

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

JQueqy Ajax的使用(POST请求)

原文地址：https://www.cnblogs.com/2mei/p/9251868.html

JQueqy Ajax的使用(POST请求)

知识推荐