AJAX有什么作用,在Django中如何使用AJAX
Admin 2022-12-24 群英技术资讯 414 次浏览
这篇文章给大家分享的是“AJAX有什么作用,在Django中如何使用AJAX”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。目录
- AJAX
- AJAX的作用
- JQuery
- JQuery的作用
- AJAX的使用方法
- X3倍后代码
- for循环后代码
- 输入完成后单数据提交代码
- 总结
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
总结
到此这篇关于Django中使用AJAX的文章就介绍到这了,更多相关Django使用AJAX内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:- Django框架如何使用ajax的post方法
- Django结合ajax进行页面实时更新的例子
- 详解Django解决ajax跨域访问问题
- Django 使用Ajax进行前后台交互的示例讲解
- django ajax发送post请求的两种方法
- Django使用AJAX调用自己写的API接口的方法
关于“AJAX有什么作用,在Django中如何使用AJAX”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。
标签：
Django中使用ajax
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
multiprocess模块是什么，子模块包括哪些
这篇文章介绍了Python中的进程操作模块(multiprocess.process)，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
-
Python实现分组聚合求均值出现异常怎么办
进行分组聚合求均值（mean）的的时候出现了以下异常： 但是求和（sum）却不会抛出异常。 异常原因，在进行数据处理的时候存在缺失值，而且被处理的列不是float同一类型
-
pygame模块怎样进行初始化，退出的操作又是怎样
pygame模块针对不同的开发需求提供了不同的子模块，例如显示模块、字体模块、混音器模块等，一些子模块在使用之前必须进行初始化，比如字体模块。为了使开发人员能够更简捷地使用pygame, pygame提供了如下两个函数。
-
Python中nb_log模块有何应用，具体用法是什么
这篇文章主要介绍了python使用nb_log模块捕获日志,文中给大家介绍了nb_log模块的使用方式，本文给大家介绍的非常详细，需要的朋友可以参考下
-
BeautifulSoup4模块是什么，如何安装使用
本文主要介绍了python beautifulsoup4模块详情,BeautifulSoup4是一款python解析库,主要用于解析HTML和XML,在爬虫知识体系中解析 HTML 会比较多一些，下文更多相关内容，需要的小伙伴可以参考一下
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
