網站首頁 編程語言 正文
AJAX
AJAX是前端技術的集合，包括JavaScript、XML、HTML、CSS等。
AJAX的作用
提升用戶體驗。
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界面進行測試
<!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">計算</button>
<!-- 添加csrf_token -->
{% csrf_token %}
<script>
$('#btn').click(function () {
var csrf = $('input[name="csrfmiddlewaretoken"]').val(); //增加csrf變量將在data中傳參以避免403錯誤
// 朝后端發送ajax請求
$.ajax({
// 1.指定朝哪個后端發送ajax請求
url:'', //不寫就是朝當前地址提交【與form表單的action參數相同】
// 2.請求方式
type:'post', // 不指定默認就是get，都是小寫
// 3.數據
data:{'num1':$('#d1').val(), 'num2':$('#d2').val(),'csrfmiddlewaretoken': csrf},
// 4.回調函數:當后端給你返回結果的時候會自動觸發，args接受后端的返回結果
success:function (args) {
$('#d3').val(args)
}
})
})
</script>
</body>
</html>
輸出效果：輸入2+2，點擊計算，異步計算結果為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界面進行測試
<!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">計算</button>
<br>
<input type="text" id="d4"> +
<input type="text" id="d5"> =
<input type="text" id="d6">
<button id="btn2">計算</button>
<br>
<input type="text" id="d7"> +
<input type="text" id="d8"> =
<input type="text" id="d9">
<button id="btn3">計算</button>
<!-- 添加csrf_token -->
{% csrf_token %}
<script>
$('#btn1').click(function () {
var csrf = $('input[name="csrfmiddlewaretoken"]').val(); //增加csrf變量將在data中傳參以避免403錯誤
// 朝后端發送ajax請求
$.ajax({
// 1.指定朝哪個后端發送ajax請求
url:'', //不寫就是朝當前地址提交【與form表單的action參數相同】
// 2.請求方式
type:'post', // 不指定默認就是get，都是小寫
// 3.數據
data:{'num1':$('#d1').val(), 'num2':$('#d2').val(),'csrfmiddlewaretoken': csrf},
// 4.回調函數:當后端給你返回結果的時候會自動觸發，args接受后端的返回結果
success:function (args) {
$('#d3').val(args)
}
})
})
$('#btn2').click(function () {
var csrf = $('input[name="csrfmiddlewaretoken"]').val(); //增加csrf變量將在data中傳參以避免403錯誤
// 朝后端發送ajax請求
$.ajax({
// 1.指定朝哪個后端發送ajax請求
url:'', //不寫就是朝當前地址提交【與form表單的action參數相同】
// 2.請求方式
type:'post', // 不指定默認就是get，都是小寫
// 3.數據
data:{'num1':$('#d4').val(), 'num2':$('#d5').val(),'csrfmiddlewaretoken': csrf},
// 4.回調函數:當后端給你返回結果的時候會自動觸發，args接受后端的返回結果
success:function (args) {
$('#d6').val(args)
}
})
})
$('#btn3').click(function () {
var csrf = $('input[name="csrfmiddlewaretoken"]').val(); //增加csrf變量將在data中傳參以避免403錯誤
// 朝后端發送ajax請求
$.ajax({
// 1.指定朝哪個后端發送ajax請求
url:'', //不寫就是朝當前地址提交【與form表單的action參數相同】
// 2.請求方式
type:'post', // 不指定默認就是get，都是小寫
// 3.數據
data:{'num1':$('#d7').val(), 'num2':$('#d8').val(),'csrfmiddlewaretoken': csrf},
// 4.回調函數:當后端給你返回結果的時候會自動觸發，args接受后端的返回結果
success:function (args) {
$('#d9').val(args)
}
})
})
</script>
</body>
</html>輸出效果：分別輸入三組數值，點擊不同的計算，異步計算結果后根據點擊的計算返回前端
for循環后代碼
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界面進行測試
<!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循環 -->
<br> <!-- 增加多個回車是為了明顯顯示是否會刷新界面 -->
<input type="text" id="d{{i|add:-2}}"> + <!-- id使用python計算 -->
<input type="text" id="d{{i|add:-1}}"> = <!-- id使用python計算 -->
<input type="text" id="d{{i}}"> <!-- id使用python計算 -->
<button class="btn" id="btn{{i}}">計算</button> <!-- id使用python計算 -->
{% 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遞增序號值
// 朝后端發送ajax請求
$.ajax({
// 1.指定朝哪個后端發送ajax請求
url: '', //不寫就是朝當前地址提交【與form表單的action參數相同】
// 2.請求方式
type: 'post', // 不指定默認就是get，都是小寫
// 3.數據
data: { 'num1': num1, 'num2': num2, 'csrfmiddlewaretoken': csrf },
// 4.回調函數:當后端給你返回結果的時候會自動觸發，args接受后端的返回結果
success: function (args) {
$(varnum3).val(args)
}
})
})
</script>
</body>
</html>
輸出效果：分別輸入三組數值，點擊不同的計算，異步計算結果后根據點擊的計算返回前端
輸入完成后單數據提交代碼
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界面進行測試
<!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循環 -->
<br> <!-- 增加多個回車是為了明顯顯示是否會刷新界面 -->
<input type="text" id="d{{i|add:-2}}"> +
<!-- id使用python計算 -->
<input type="text" id="d{{i|add:-1}}"> =
<!-- id使用python計算 -->
<input type="text" id="d{{i}}"> <!-- id使用python計算 -->
<button class="btn" id="btn{{i}}">計算</button> <!-- id使用python計算 -->
{% 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遞增序號值
// 朝后端發送ajax請求
$.ajax({
// 1.指定朝哪個后端發送ajax請求
url: '', //不寫就是朝當前地址提交【與form表單的action參數相同】
// 2.請求方式
type: 'post', // 不指定默認就是get，都是小寫
// 3.數據
data: { 'num1': num1, 'num2': num2, 'csrfmiddlewaretoken': csrf },
// 4.回調函數:當后端給你返回結果的時候會自動觸發，args接受后端的返回結果
success: function (args) {
$(varnum3).val(args)
}
})
})
</script>
<script>
document.addEventListener("mouseout", function (e) { //獲取光標事件
var num = ($(e.target).attr('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()
});
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)))) { //當按鍵為Tab、Enter、Space、Ctrl+S時執行操作
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>
輸出效果：值輸到哪里，哪里就會顯示出結果，無須點擊計算按鈕
最后把計算按鈕隱藏一下
<button hidden class="btn" id="btn{{i}}">計算</button> <!-- id使用python計算 -->
本來還想做一下一鍵全部提交代碼、輸入完成后全數據提交代碼兩個功能，但發現這樣要提交的post值太多了，還是一次提交單個或單行數據比較靠譜
參考鏈接：
- https://www.cnblogs.com/yangyi215/p/14964897.html
- https://www.cnblogs.com/oldpai/p/9637774.html
總結?
原文鏈接：https://blog.csdn.net/weixin_40133285/article/details/123352006
相關推薦
- 2022-07-19 JDBC BLOB文件存取
- 2021-12-02 Android?NDK開發(C語言--動態內存分配)_Android
- 2022-06-13 正則化DropPath/drop_path用法示例(Python實現)_python
- 2022-01-13 macOS 升級后 nvm 安裝的 node 和 npm 出錯
- 2021-12-12 簡單介紹三層架構工作原理_C#教程
- 2022-02-16 dart總結(三.類,接口,繼承,多態,mixins和枚舉詳解)
- 2022-11-11 python貪吃蛇核心功能實現下_python
- 2022-12-23 react數據管理機制React.Context源碼解析_React
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速