Django中使用AJAX的詳細(xì)過程
更新時間：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是一個兼容多種瀏覽器的JavaScript庫。
JQuery的作用
JQuery簡化JavaScript的使用，同理，簡化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請求僅返回HttpResponse值
return render(request, 'error.html') #GET請求返回error.html界面
error.html #使用error界面進(jìn)行測試
<!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>
<!-- 增加多個回車是為了明顯顯示是否會刷新界面 -->
<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錯誤
// 朝后端發(fā)送ajax請求
$.ajax({
// 1.指定朝哪個后端發(fā)送ajax請求
url:'', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
// 2.請求方式
type:'post', // 不指定默認(rèn)就是get，都是小寫
// 3.數(shù)據(jù)
data:{'num1':$('#d1').val(), 'num2':$('#d2').val(),'csrfmiddlewaretoken': csrf},
// 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時候會自動觸發(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請求僅返回HttpResponse值
return render(request, 'error.html') #GET請求返回error.html界面
error.html #使用error界面進(jìn)行測試
<!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>
<!-- 增加多個回車是為了明顯顯示是否會刷新界面 -->
<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錯誤
// 朝后端發(fā)送ajax請求
$.ajax({
// 1.指定朝哪個后端發(fā)送ajax請求
url:'', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
// 2.請求方式
type:'post', // 不指定默認(rèn)就是get，都是小寫
// 3.數(shù)據(jù)
data:{'num1':$('#d1').val(), 'num2':$('#d2').val(),'csrfmiddlewaretoken': csrf},
// 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時候會自動觸發(fā)，args接受后端的返回結(jié)果
success:function (args) {
$('#d3').val(args)
}
})
})
$('#btn2').click(function () {
var csrf = $('input[name="csrfmiddlewaretoken"]').val(); //增加csrf變量將在data中傳參以避免403錯誤
// 朝后端發(fā)送ajax請求
$.ajax({
// 1.指定朝哪個后端發(fā)送ajax請求
url:'', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
// 2.請求方式
type:'post', // 不指定默認(rèn)就是get，都是小寫
// 3.數(shù)據(jù)
data:{'num1':$('#d4').val(), 'num2':$('#d5').val(),'csrfmiddlewaretoken': csrf},
// 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時候會自動觸發(fā)，args接受后端的返回結(jié)果
success:function (args) {
$('#d6').val(args)
}
})
})
$('#btn3').click(function () {
var csrf = $('input[name="csrfmiddlewaretoken"]').val(); //增加csrf變量將在data中傳參以避免403錯誤
// 朝后端發(fā)送ajax請求
$.ajax({
// 1.指定朝哪個后端發(fā)送ajax請求
url:'', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
// 2.請求方式
type:'post', // 不指定默認(rèn)就是get，都是小寫
// 3.數(shù)據(jù)
data:{'num1':$('#d7').val(), 'num2':$('#d8').val(),'csrfmiddlewaretoken': csrf},
// 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時候會自動觸發(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請求僅返回HttpResponse值
return render(request, 'error.html') #GET請求返回error.html界面
error.html #使用error界面進(jìn)行測試
<!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> <!-- 增加多個回車是為了明顯顯示是否會刷新界面 -->
<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錯誤
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遞增序號值
var num2 = $(varnum2).val() //取id遞增序號值
var num3 = $(varnum3).val() //取id遞增序號值
// 朝后端發(fā)送ajax請求
$.ajax({
// 1.指定朝哪個后端發(fā)送ajax請求
url: '', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
// 2.請求方式
type: 'post', // 不指定默認(rèn)就是get，都是小寫
// 3.數(shù)據(jù)
data: { 'num1': num1, 'num2': num2, 'csrfmiddlewaretoken': csrf },
// 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時候會自動觸發(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請求僅返回HttpResponse值
return render(request, 'error.html') #GET請求返回error.html界面
error.html #使用error界面進(jìn)行測試
<!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> <!-- 增加多個回車是為了明顯顯示是否會刷新界面 -->
<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錯誤
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遞增序號值
var num2 = $(varnum2).val() //取id遞增序號值
var num3 = $(varnum3).val() //取id遞增序號值
// 朝后端發(fā)送ajax請求
$.ajax({
// 1.指定朝哪個后端發(fā)送ajax請求
url: '', //不寫就是朝當(dāng)前地址提交【與form表單的action參數(shù)相同】
// 2.請求方式
type: 'post', // 不指定默認(rèn)就是get，都是小寫
// 3.數(shù)據(jù)
data: { 'num1': num1, 'num2': num2, 'csrfmiddlewaretoken': csrf },
// 4.回調(diào)函數(shù):當(dāng)后端給你返回結(jié)果的時候會自動觸發(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時執(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ù)侥睦?，哪里就會顯示出結(jié)果，無須點(diǎn)擊計(jì)算按鈕
最后把計(jì)算按鈕隱藏一下
<button hidden class="btn" id="btn{{i}}">計(jì)算</button> <!-- id使用python計(jì)算 -->
本來還想做一下一鍵全部提交代碼、輸入完成后全數(shù)據(jù)提交代碼兩個功能，但發(fā)現(xiàn)這樣要提交的post值太多了，還是一次提交單個或單行數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Python 生成一個從0到n個數(shù)字的列表4種方法小結(jié)
今天小編就為大家分享一篇Python 生成一個從0到n個數(shù)字的列表4種方法小結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
迭代器是一種對象，該對象包含值的可計(jì)數(shù)數(shù)字。從技術(shù)上講，在?Python?中，迭代器是實(shí)現(xiàn)迭代器協(xié)議的對象，它包含方法?iter()?和?next()。本文就來聊聊迭代器的具體使用吧2023-03-03
這篇文章主要介紹了python如何將mat文件轉(zhuǎn)為png，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Python數(shù)據(jù)可視化處理庫PyEcharts柱狀圖,餅圖,線性圖,詞云圖常用實(shí)例詳解
這篇文章主要介紹了Python數(shù)據(jù)可視化處理庫PyEcharts柱狀圖、餅圖、線性圖常用實(shí)例詳解,需要的朋友可以參考下2020-02-02
Python利用pywin32實(shí)現(xiàn)自動操作電腦
在windows系統(tǒng)上，重復(fù)性的操作可以用Python腳本來完成，其中常用的模塊是win32gui、win32con、win32api，要使用這三個模塊需要先安裝pywin32。本文就為大家介紹了如何利用這些模塊實(shí)現(xiàn)自動操作電腦，感興趣的可以了解一下2022-11-11
python爬蟲爬取筆趣網(wǎng)小說網(wǎng)站過程圖解
這篇文章主要介紹了python爬蟲爬取筆趣網(wǎng)小說網(wǎng)站過程圖解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
pandas實(shí)現(xiàn)按照多列排序-ascending
這篇文章主要介紹了pandas實(shí)現(xiàn)按照多列排序-ascending，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
使用keras實(shí)現(xiàn)densenet和Xception的模型融合
這篇文章主要介紹了使用keras實(shí)現(xiàn)densenet和Xception的模型融合，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-05-05
在python的應(yīng)用過程中，經(jīng)常會用到獲取文件列表的方法，常規(guī)的做法是這樣的2009-03-03
Python @property原理解析和用法實(shí)例
這篇文章主要介紹了Python @property原理解析和用法實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02