带参数的Ajax请求

通过Ajax实现下面的功能：

在实现这个功能之前需要掌握的点：

1.在学习jQuery时，我们知道：

获取input标签中输入的值：$("#num1").val();

给input标签赋值：$("#ret").val("888");

2.在学习django的form表单中的csrf_token时，会遇到forbidden的问题。只要给服务器发送请求的时候将csrf_token中的键值作为请求体传给服务器就好了。

实现如下：

urls.py:

from django.contrib import admin

from django.urls import path

from app01 import views

urlpatterns = [

path('admin/', admin.site.urls),

path('index/', views.index),

path('cal/', views.cal),

]

from django.contrib import admin

from django.urls import path

from app01 import views

urlpatterns = [

path('admin/', admin.site.urls),

path('index/', views.index),

path('cal/', views.cal),

]

views.py:

from django.shortcuts import render, HttpResponse

# Create your views here.

def index(request):

return render(request, "index.html")

def cal(request):

num1=request.POST.get("num1")

num2=request.POST.get("num2")

ret=int(num1)+int(num2)

return HttpResponse(str(ret))

from django.shortcuts import render, HttpResponse

# Create your views here.

def index(request):

return render(request, "index.html")

def cal(request):

num1=request.POST.get("num1")

num2=request.POST.get("num2")

ret=int(num1)+int(num2)

return HttpResponse(str(ret))

index.html:

Title

INDEX页面

---

{% csrf_token %}

+=计算

// 传参的Ajax请求

$(".cal").click(function () {

var num1=$("#num1").val();

var num2=$("#num2").val();

$.ajax({

url: "/cal/",

type: "post",

data: {

num1:num1,

num2:num2,

csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()

},

success: function (response) {

console.log(response);

$("#ret").val(response)

}

})

})

Title

INDEX页面

---

{% csrf_token %}

+=计算

// 传参的Ajax请求

$(".cal").click(function () {

var num1=$("#num1").val();

var num2=$("#num2").val();

$.ajax({

url: "/cal/",

type: "post",

data: {

num1:num1,

num2:num2,

csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()

},

success: function (response) {

console.log(response);

$("#ret").val(response)

}

})

})

解析：

用户地址栏输入http://127.0.0.1:8000/index/，返回计算的页面。点击计算按钮，执行回调函数，发送Ajax请求到/cal/，请求方式为post，请求过程中是携带数据的(前两个输入框输入的内容和csrfmiddlewaretoken对应的值)，服务器拿到值做计算，响应给response，通过DOM操作添加到第三个input标签中。

原文链接：https://www.cnblogs.com/897463196-a/p/11727690.html