『Python Web框架之Django』第几节: AJAX

桃扇骨 2021-12-19 15:05 209阅读 0赞

# 一. AJAX简介 #

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

注意: AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

*  同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
 *  异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

## 1. AJAX常见应用场景 ##

*  搜索引擎根据用户输入的关键字，自动提示检索关键字。
 *  注册时候的用户名查重。

当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。

*  整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
 *  当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

![1424198-20190625221935256-88447266.png][]

当我输入昵称之后, 把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为conan的用户是否存在，最终服务器返回true表示名为conan的用户已经存在了，浏览器在得到结果后显示“该昵称已被他人使用”。

*  整个过程中页面没有刷新，只是局部刷新了；
 *  在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

## 2. AJAX的优点 ##

### 优点： ###

*  AJAX使用JavaScript技术向服务器发送异步请求；
 *  AJAX请求无须刷新整个页面；
 *  因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；

# 二. jQuery实现的AJAX #

## 1. jQuery发送AJAX的请求例子 ##

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ajax测试</title>
    </head>
    <body>
    
    <button id="btn-1">提交</button>
    
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $('#btn-1').click(function(){
            $.ajax({
                url: '/ajax_deal/',
                type: 'post',
                data: {
                    username: 'conan',
                    password: 'conan',
                },
                success: function(res){
                    alert(res)
                }
            })
        })
    </script>
    </body>
    </html>

HTML部分代码

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

from django.shortcuts import render, HttpResponse
    
    
    def ajax_test(request):
        return render(request, 'ajax_test.html')
    
    
    def ajax_deal(request):
        username = request.POST.get('username')
        password = request.POST.get('password')
        print(username, password)
        return HttpResponse('ok')

views.py

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

urlpatterns = [
        re_path(r'^ajax_test', views.ajax_test),
        re_path(r'^ajax_deal', views.ajax_deal),
    ]

urls.py

## 2. AJAX参数 ##

## 3. 一个简单的例子 ##

页面输入两个整数, 通过AJAX传输到后端计算出结果并返回.

![ContractedBlock.gif][] HTML部分代码

![ContractedBlock.gif][] views.py

![ContractedBlock.gif][] urls.py

# 三. JS实现AJAX #

# 四. AJAX请求设置csrf\_token #

# 五. AJAX上传文件 #

转载于:https://www.cnblogs.com/BlameKidd/p/11087115.html

[1424198-20190625221935256-88447266.png]: /images/20211219/70c9a6ed253f41e8ab27ae90a6442410.png
[ContractedBlock.gif]: /images/20211219/2dd2020aed6c44bea34588901fe54935.png
[ExpandedBlockStart.gif]: /images/20211219/308b985561194bedb5b7b16149d015ca.png