JQueqy Ajax的使用(POST请求)
Posted 虫儿要吃草 真的要吃草吗？？
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
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), ]
# -*- 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)
三，知识点
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请求)的主要内容，如果未能解决你的问题，请参考以下文章
将 Node.js GET /POST 请求更改为 Ajax