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

时间 2019-12-11

标签 python web 框架 django 第几 ajax 栏目 Python 繁體版

原文原文链接

一. AJAX简介

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

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

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

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

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

1. AJAX常见应用场景

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

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

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

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

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

2. AJAX的优势

优势：

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

二. jQuery实现的AJAX

1. jQuery发送AJAX的请求例子

<!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部分代码

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

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

urls.py

2. AJAX参数

3. 一个简单的例子

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