Django中使用AJAX的詳細(xì)過程
更新時(shí)間：2022年11月02日 12:16:27 作者：-一臉懵逼-
在項(xiàng)目中前后端數(shù)據(jù)相互是一種常態(tài),下面這篇文章主要給大家介紹了關(guān)于Django中使用AJAX的詳細(xì)過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
AJAX
AJAX是前端技術(shù)的集合，包括JavaScript、XML、HTML、CSS等。
AJAX的作用
提升用戶體驗(yàn)。
JQuery
JQuery是一個(gè)兼容多種瀏覽器的JavaScript庫(kù)。
JQuery的作用
JQuery簡(jiǎn)化JavaScript的使用，同理，簡(jiǎn)化AJAX的使用。
在線鏈接
Django版本：3.0.6
JQuery版本：1.12.4
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
AJAX的使用方法
urls.py
from django.urls import path
import Public.views
urlpatterns = [
path('error/',Public.views.error),
]
views.py
from django.http import HttpResponse, request, response
from django.shortcuts import redirect, render, resolve_url
def error(request):
if request.method == 'POST':
num1 = request.POST.get('num1',0)
num2 = request.POST.get('num2',0)
num = int(num1)+int(num2)
return HttpResponse(str(num)) #POST請(qǐng)求僅返回HttpResponse值
return render(request, 'error.html') #GET請(qǐng)求返回error.html界面
error.html #使用error界面進(jìn)行測(cè)試
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>error</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
</head>
<body>
<!-- 增加多個(gè)回車是為了明顯顯示是否會(huì)刷新界面 -->
<br>
<input type="text" id="d1"> +
<input type="text" id="d2"> =
<input type="text" id="d3">
<button id="btn">計(jì)算</button>
<!-- 添加csrf_token -->
{% csrf_token %}
<script>
$('#btn').click(function () {
var csrf = $('input[name="csrfmiddlewaretoken"]').val(); //增加csrf變量將在data中傳參以避免403錯(cuò)誤
// 朝后端發(fā)送ajax請(qǐng)求
$.ajax({
// 1.指定朝哪個(gè)后端發(fā)送ajax請(qǐng)求
url:'', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
// 2.請(qǐng)求方式
type:'post', // 不指定默認(rèn)就是get，都是小寫
// 3.數(shù)據(jù)
data:{'num1':$('#d1').val(), 'num2':$('#d2').val(),'csrfmiddlewaretoken': csrf},
// 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時(shí)候會(huì)自動(dòng)觸發(fā)，args接受后端的返回結(jié)果
success:function (args) {
$('#d3').val(args)
}
})
})
</script>
</body>
</html>
輸出效果：輸入2+2，點(diǎn)擊計(jì)算，異步計(jì)算結(jié)果為4并返回前端
X3倍后代碼
urls.py
from django.urls import path
import Public.views
urlpatterns = [
path('error/',Public.views.error),
]
views.py
from django.http import HttpResponse, request, response
from django.shortcuts import redirect, render, resolve_url
def error(request):
if request.method == 'POST':
num1 = request.POST.get('num1',0)
num2 = request.POST.get('num2',0)
num = int(num1)+int(num2)
return HttpResponse(str(num)) #POST請(qǐng)求僅返回HttpResponse值
return render(request, 'error.html') #GET請(qǐng)求返回error.html界面
error.html #使用error界面進(jìn)行測(cè)試
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>error</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
</head>
<body>
<!-- 增加多個(gè)回車是為了明顯顯示是否會(huì)刷新界面 -->
<br>
<input type="text" id="d1"> +
<input type="text" id="d2"> =
<input type="text" id="d3">
<button id="btn1">計(jì)算</button>
<br>
<input type="text" id="d4"> +
<input type="text" id="d5"> =
<input type="text" id="d6">
<button id="btn2">計(jì)算</button>
<br>
<input type="text" id="d7"> +
<input type="text" id="d8"> =
<input type="text" id="d9">
<button id="btn3">計(jì)算</button>
<!-- 添加csrf_token -->
{% csrf_token %}
<script>
$('#btn1').click(function () {
var csrf = $('input[name="csrfmiddlewaretoken"]').val(); //增加csrf變量將在data中傳參以避免403錯(cuò)誤
// 朝后端發(fā)送ajax請(qǐng)求
$.ajax({
// 1.指定朝哪個(gè)后端發(fā)送ajax請(qǐng)求
url:'', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
// 2.請(qǐng)求方式
type:'post', // 不指定默認(rèn)就是get，都是小寫
// 3.數(shù)據(jù)
data:{'num1':$('#d1').val(), 'num2':$('#d2').val(),'csrfmiddlewaretoken': csrf},
// 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時(shí)候會(huì)自動(dòng)觸發(fā)，args接受后端的返回結(jié)果
success:function (args) {
$('#d3').val(args)
}
})
})
$('#btn2').click(function () {
var csrf = $('input[name="csrfmiddlewaretoken"]').val(); //增加csrf變量將在data中傳參以避免403錯(cuò)誤
// 朝后端發(fā)送ajax請(qǐng)求
$.ajax({
// 1.指定朝哪個(gè)后端發(fā)送ajax請(qǐng)求
url:'', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
// 2.請(qǐng)求方式
type:'post', // 不指定默認(rèn)就是get，都是小寫
// 3.數(shù)據(jù)
data:{'num1':$('#d4').val(), 'num2':$('#d5').val(),'csrfmiddlewaretoken': csrf},
// 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時(shí)候會(huì)自動(dòng)觸發(fā)，args接受后端的返回結(jié)果
success:function (args) {
$('#d6').val(args)
}
})
})
$('#btn3').click(function () {
var csrf = $('input[name="csrfmiddlewaretoken"]').val(); //增加csrf變量將在data中傳參以避免403錯(cuò)誤
// 朝后端發(fā)送ajax請(qǐng)求
$.ajax({
// 1.指定朝哪個(gè)后端發(fā)送ajax請(qǐng)求
url:'', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
// 2.請(qǐng)求方式
type:'post', // 不指定默認(rèn)就是get，都是小寫
// 3.數(shù)據(jù)
data:{'num1':$('#d7').val(), 'num2':$('#d8').val(),'csrfmiddlewaretoken': csrf},
// 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時(shí)候會(huì)自動(dòng)觸發(fā)，args接受后端的返回結(jié)果
success:function (args) {
$('#d9').val(args)
}
})
})
</script>
</body>
</html>輸出效果：分別輸入三組數(shù)值，點(diǎn)擊不同的計(jì)算，異步計(jì)算結(jié)果后根據(jù)點(diǎn)擊的計(jì)算返回前端
for循環(huán)后代碼
urls.py
from django.urls import path
import Public.views
urlpatterns = [
path('error/',Public.views.error),
]
views.py
from django.http import HttpResponse, request, response
from django.shortcuts import redirect, render, resolve_url
def error(request):
if request.method == 'POST':
num1 = request.POST.get('num1',0)
num2 = request.POST.get('num2',0)
num = int(num1)+int(num2)
return HttpResponse(str(num)) #POST請(qǐng)求僅返回HttpResponse值
return render(request, 'error.html') #GET請(qǐng)求返回error.html界面
error.html #使用error界面進(jìn)行測(cè)試
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>error</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
</head>
<body>
{% for i in '369'|make_list %} <!-- for循環(huán) -->
<br> <!-- 增加多個(gè)回車是為了明顯顯示是否會(huì)刷新界面 -->
<input type="text" id="d{{i|add:-2}}"> + <!-- id使用python計(jì)算 -->
<input type="text" id="d{{i|add:-1}}"> = <!-- id使用python計(jì)算 -->
<input type="text" id="d{{i}}"> <!-- id使用python計(jì)算 -->
<button class="btn" id="btn{{i}}">計(jì)算</button> <!-- id使用python計(jì)算 -->
{% endfor %}
{% csrf_token %} <!-- 添加csrf_token -->
<script>
$('.btn').click(function () {
var csrf = $('input[name="csrfmiddlewaretoken"]').val(); //增加csrf變量將在data中傳參以避免403錯(cuò)誤
var btn = $(this).attr('id') //取id值
var varnum1 = "#d"+(btn.replace("btn","")-2) //取id值
var varnum2 = "#d"+(btn.replace("btn","")-1) //取id值
var varnum3 = "#d"+(btn.replace("btn","")) //取id值
var num1 = $(varnum1).val() //取id遞增序號(hào)值
var num2 = $(varnum2).val() //取id遞增序號(hào)值
var num3 = $(varnum3).val() //取id遞增序號(hào)值
// 朝后端發(fā)送ajax請(qǐng)求
$.ajax({
// 1.指定朝哪個(gè)后端發(fā)送ajax請(qǐng)求
url: '', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
// 2.請(qǐng)求方式
type: 'post', // 不指定默認(rèn)就是get，都是小寫
// 3.數(shù)據(jù)
data: { 'num1': num1, 'num2': num2, 'csrfmiddlewaretoken': csrf },
// 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時(shí)候會(huì)自動(dòng)觸發(fā)，args接受后端的返回結(jié)果
success: function (args) {
$(varnum3).val(args)
}
})
})
</script>
</body>
</html>
輸出效果：分別輸入三組數(shù)值，點(diǎn)擊不同的計(jì)算，異步計(jì)算結(jié)果后根據(jù)點(diǎn)擊的計(jì)算返回前端
輸入完成后單數(shù)據(jù)提交代碼
urls.py
from django.urls import path
import Public.views
urlpatterns = [
path('error/',Public.views.error),
]
views.py
def error(request):
if request.method == 'POST':
num1 = request.POST.get('num1',0)
num2 = request.POST.get('num2',0)
num = int(num1)+int(num2)
return HttpResponse(str(num)) #POST請(qǐng)求僅返回HttpResponse值
return render(request, 'error.html') #GET請(qǐng)求返回error.html界面
error.html #使用error界面進(jìn)行測(cè)試
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>error</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
</head>
<body onclick="click()">
{% for i in '369'|make_list %}
<!-- for循環(huán) -->
<br> <!-- 增加多個(gè)回車是為了明顯顯示是否會(huì)刷新界面 -->
<input type="text" id="d{{i|add:-2}}"> +
<!-- id使用python計(jì)算 -->
<input type="text" id="d{{i|add:-1}}"> =
<!-- id使用python計(jì)算 -->
<input type="text" id="d{{i}}"> <!-- id使用python計(jì)算 -->
<button class="btn" id="btn{{i}}">計(jì)算</button> <!-- id使用python計(jì)算 -->
{% endfor %}
{% csrf_token %}
<!-- 添加csrf_token -->
<script>
$('.btn').click(function () {
var csrf = $('input[name="csrfmiddlewaretoken"]').val(); //增加csrf變量將在data中傳參以避免403錯(cuò)誤
var btn = $(this).attr('id') //取id值
var varnum1 = "#d" + (btn.replace("btn", "") - 2) //取id值
var varnum2 = "#d" + (btn.replace("btn", "") - 1) //取id值
var varnum3 = "#d" + (btn.replace("btn", "")) //取id值
var num1 = $(varnum1).val() //取id遞增序號(hào)值
var num2 = $(varnum2).val() //取id遞增序號(hào)值
var num3 = $(varnum3).val() //取id遞增序號(hào)值
// 朝后端發(fā)送ajax請(qǐng)求
$.ajax({
// 1.指定朝哪個(gè)后端發(fā)送ajax請(qǐng)求
url: '', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
// 2.請(qǐng)求方式
type: 'post', // 不指定默認(rèn)就是get，都是小寫
// 3.數(shù)據(jù)
data: { 'num1': num1, 'num2': num2, 'csrfmiddlewaretoken': csrf },
// 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時(shí)候會(huì)自動(dòng)觸發(fā)，args接受后端的返回結(jié)果
success: function (args) {
$(varnum3).val(args)
}
})
})
</script>
<script>
document.addEventListener("mouseout", function (e) { //獲取光標(biāo)事件
var num = ($(e.target).attr('id')).replace("d", "").replace("btn", "") //獲取光標(biāo)所在元素id
if (num % 3 === 0) {
}
else if (num % 3 === 1) {
num = parseInt(num) + 2
}
else if (num % 3 === 2) {
num = parseInt(num) + 1
}
varnum = "#btn" + num
$(varnum).click()
});
document.addEventListener("keydown", function (e) { //獲取按鍵事件
if ((e.keyCode == 9) || (e.keyCode == 32) || (e.keyCode == 13) || ((((e.keyCode == 83)) && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)))) { //當(dāng)按鍵為Tab、Enter、Space、Ctrl+S時(shí)執(zhí)行操作
var num = (document.activeElement.id).replace("d", "").replace("btn", "") //獲取所在位置元素id
if (num % 3 === 0) {
}
else if (num % 3 === 1) {
num = parseInt(num) + 2
}
else if (num % 3 === 2) {
num = parseInt(num) + 1
}
varnum = "#btn" + num
$(varnum).click()
}
});
</script>
</body>
</html>
輸出效果：值輸?shù)侥睦铮睦锞蜁?huì)顯示出結(jié)果，無須點(diǎn)擊計(jì)算按鈕
最后把計(jì)算按鈕隱藏一下
<button hidden class="btn" id="btn{{i}}">計(jì)算</button> <!-- id使用python計(jì)算 -->
本來還想做一下一鍵全部提交代碼、輸入完成后全數(shù)據(jù)提交代碼兩個(gè)功能，但發(fā)現(xiàn)這樣要提交的post值太多了，還是一次提交單個(gè)或單行數(shù)據(jù)比較靠譜
參考鏈接：
- https://www.cnblogs.com/yangyi215/p/14964897.html
- https://www.cnblogs.com/oldpai/p/9637774.html
總結(jié)
到此這篇關(guān)于Django中使用AJAX的文章就介紹到這了,更多相關(guān)Django使用AJAX內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
python 中Arduino串口傳輸數(shù)據(jù)到電腦并保存至excel表格
這篇文章主要介紹了python Arduino串口傳輸數(shù)據(jù)到電腦并保存至excel表格,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
python利用requests庫(kù)進(jìn)行接口測(cè)試的方法詳解
在python的標(biāo)準(zhǔn)庫(kù)中，雖然提供了urllib,utllib2,httplib，但是做接口測(cè)試，requests真心好，正如官方說的，“讓HTTP服務(wù)人類”，一言以蔽之，說明一切，這篇文章主要給大家介紹了關(guān)于python利用requests庫(kù)進(jìn)行接口測(cè)試的相關(guān)資料，需要的朋友可以參考下2018-07-07
Python基礎(chǔ)知識(shí)之推導(dǎo)式詳解
這篇文章主要介紹了Python基礎(chǔ)知識(shí)之推導(dǎo)式詳解,Python推導(dǎo)式是一種簡(jiǎn)潔高效的代碼編寫方式，可以用一行代碼來創(chuàng)建列表、集合、字典等復(fù)雜數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下2023-07-07
Python使用Chardet庫(kù)檢測(cè)字符編碼的操作詳解
在處理文本數(shù)據(jù)時(shí),字符編碼問題是一個(gè)常見的挑戰(zhàn),如果編碼不正確,可能會(huì)導(dǎo)致亂碼問題,而 Chardet 是 Python 中非常實(shí)用的一個(gè)庫(kù),可以幫助我們快速檢測(cè)文件或字符串的編碼格式,本文給大家詳細(xì)介紹了Python Chardet 庫(kù)用法,需要的朋友可以參考下2025-01-01
django rest framework之請(qǐng)求與響應(yīng)(詳解)
下面小編就為大家?guī)硪黄猟jango rest framework之請(qǐng)求與響應(yīng)(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，希望對(duì)大家有所幫助2017-11-11
Python編程判斷一個(gè)正整數(shù)是否為素?cái)?shù)的方法
這篇文章主要介紹了Python編程判斷一個(gè)正整數(shù)是否為素?cái)?shù)的方法,涉及Python數(shù)學(xué)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了Python爬蟲基本套路，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
爬蟲使用IP來隱藏真實(shí)地址的過程(python示例)
這篇文章主要為大家介紹了爬蟲使用IP來隱藏真實(shí)地址的過程(python示例)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
Flaks基礎(chǔ)之在URL中添加變量的實(shí)現(xiàn)詳解
這篇文章主要介紹了在python開發(fā)中，F(xiàn)laks框架之上在URL鏈接中添加變量的實(shí)現(xiàn)方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
Django request.META.get()獲取不到header頭的原因分析
這篇文章主要介紹了Django request.META.get()獲取不到header頭的原因分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2021-04-04