首页Django

Django Ajax的基本使用

2020年11月12日 13:181333

Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

举个栗子:网站的用户注册页面,当用户输入一个用户名,鼠标离开输入框的时候,立即会提示"该用户已被注册"或者"该用户名可用"的提示,这就是一次Ajax请求,前端将输入框的内容传递到数据库进行校验,并返回结果,用户完全感知不到。

Ajax请求数据

django 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'),
]

Ajax发送文件