帶參數的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

總結

以上是生活随笔為你收集整理的a标签用ajax请求传参,Django中如何实现传参的Ajax请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。