Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
举个栗子:网站的用户注册页面,当用户输入一个用户名,鼠标离开输入框的时候,立即会提示"该用户已被注册"或者"该用户名可用"的提示,这就是一次Ajax请求,前端将输入框的内容传递到数据库进行校验,并返回结果,用户完全感知不到。
Ajax请求数据
# 前端模版 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Django Ajax</title>
<script src="/images/jquery.js"></script>
</head>
<body>
<button id="btn">提交</button>
<p class="text"></p>
<script>
$('#btn').click(function (){
$.ajax({
url:'/ajax/',
type:'get',
success:function (data){
$('.text').text(data)
}
})
});
</script>
</body>
</html>
# urls.py 路由设置
from django.contrib import admin
from django.urls import path
from app01.views import ajax,index
urlpatterns = [
path('admin/', admin.site.urls),
path('',index,name='index'),
path('ajax/',ajax,name='ajax'),
]
# views.py 视图函数
from django.shortcuts import render,HttpResponse
def index(request):
return render(request, 'index.html')
def ajax(request):
return HttpResponse('这是Ajax请求的信息')
Ajax请求带参数
# 前端模版 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Django Ajax</title>
<script src="/images/jquery.js"></script>
</head>
<body>
<input type="text" id="num1" placeholder="请输入一个数字">+
<input type="text" id="num2" placeholder="请输入一个数字">=
<input type="text" id="sum" placeholder="计算结果">
<button type="button" id="btn">计算</button>
<script>
$('#btn').click(function (){
$.ajax({
url:'',
type:'post',
data:{
'n1':$('#num1').val(),
'n2':$('#num2').val(),
csrfmiddlewaretoken: '{{ csrf_token }}',
},
success:function (data){
$('#sum').val(data)
}
})
});
</script>
</body>
</html>
注意:如果不加csrfmiddlewaretoken可能会报错403
# views.py 视图函数
from django.shortcuts import render,HttpResponse
def index(request):
if request.method == 'POST':
n1 = request.POST.get('n1')
n2 = request.POST.get('n2')
n3 = int(n1) + int(n2)
return HttpResponse(n3)
return render(request, 'index.html')
函数接收Ajax传递过来的数据并作处理,然后在返回给Ajax,最终success回调函数接收data
# urls.py
from django.contrib import admin
from django.urls import path
from app01.views import index
urlpatterns = [
path('admin/', admin.site.urls),
path('',index,name='index'),
]