Django中使用AJAX的詳細(xì)過程
AJAX
AJAX是前端技術(shù)的集合,包括JavaScript、XML、HTML、CSS等。
AJAX的作用
提升用戶體驗(yàn)。
JQuery
JQuery是一個(gè)兼容多種瀏覽器的JavaScript庫。
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 生成一個(gè)從0到n個(gè)數(shù)字的列表4種方法小結(jié)
今天小編就為大家分享一篇Python 生成一個(gè)從0到n個(gè)數(shù)字的列表4種方法小結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11Python數(shù)據(jù)可視化處理庫PyEcharts柱狀圖,餅圖,線性圖,詞云圖常用實(shí)例詳解
這篇文章主要介紹了Python數(shù)據(jù)可視化處理庫PyEcharts柱狀圖、餅圖、線性圖常用實(shí)例詳解,需要的朋友可以參考下2020-02-02Python利用pywin32實(shí)現(xiàn)自動(dòng)操作電腦
在windows系統(tǒng)上,重復(fù)性的操作可以用Python腳本來完成,其中常用的模塊是win32gui、win32con、win32api,要使用這三個(gè)模塊需要先安裝pywin32。本文就為大家介紹了如何利用這些模塊實(shí)現(xiàn)自動(dòng)操作電腦,感興趣的可以了解一下2022-11-11python爬蟲爬取筆趣網(wǎng)小說網(wǎng)站過程圖解
這篇文章主要介紹了python爬蟲爬取筆趣網(wǎng)小說網(wǎng)站過程圖解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11pandas實(shí)現(xiàn)按照多列排序-ascending
這篇文章主要介紹了pandas實(shí)現(xiàn)按照多列排序-ascending,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05使用keras實(shí)現(xiàn)densenet和Xception的模型融合
這篇文章主要介紹了使用keras實(shí)現(xiàn)densenet和Xception的模型融合,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-05-05Python @property原理解析和用法實(shí)例
這篇文章主要介紹了Python @property原理解析和用法實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02