一. AJAX简介

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

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

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

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

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

1. AJAX常见应用场景

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

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

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

当我输入昵称之后, 把光标移动到其他表单项上时，浏览器会使用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传输到后端计算出结果并返回.

HTML部分代码
views.py
urls.py

三. JS实现AJAX

四. AJAX请求设置csrf_token

五. AJAX上传文件

『Python Web框架之Django』第几节: AJAX的更多相关文章

  1. python web框架——扩展Django&tornado

    一 Django自定义分页 目的:自定义分页功能,并把它写成模块(注意其中涉及到的python基础知识) models.py文件 # Create your models here. class Us ...

  2. 浅谈Python Web 框架：Django, Twisted, Tornado, Flask, Cyclone 和 Pyramid

    Django Django 是一个高级的 Python Web 框架,支持快速开发,简洁.实用的设计.如果你正在建一个和电子商务网站相似的应用,那你应该选择用 Django 框架.它能使你快速完成工作 ...

  3. 两个Python web框架：Django & Tornado比较

    就是说它作为 web 框架比 Django 简单,又支援异步 IO,且更不需要前端的 webserver ? 我已经混乱了, Tornado是 Nginx.Django.Node.js 的结合体?又或 ...

  4. [ 转载 ] Python Web 框架：Django、Flask 与 Tornado 的性能对比

    本文的数据涉及到我面试时遇到过的问题,大概一次 http 请求到收到响应需要多少时间.这个问题在实际工作中与框架有比较大的关系,因此特别就框架的性能做了一次分析. 这里使用 2016 年 6 月 9 ...

  5. 选择一个 Python Web 框架：Django vs Flask vs Pyramid

    Pyramid, Django, 和 Flask都是优秀的框架,为项目选择其中的哪一个都是伤脑筋的事.我们将会用三种框架实现相同功能的应用来更容易的对比三者.也可以直接跳到框架实战(Framework ...

  6. python web框架之django环境搭建

    一.django环境搭建 https://www.djangoproject.com/download/ 下载适合自己的版本,在右边有压缩包版本的,也可以到git上去拽.我用的python27,下载的 ...

  7. Python web 框架之 Django 基础搭建服务

    1. 需要安装 Python 和 Django 环境,Python 环境的安装我就不在多说了 2. 安装框架 Django Django 安装,推荐先装个 pip吧,easyinstall也可以,然后 ...

  8. 浅谈Python web框架

    一.Python web框架 Web Framework,Ruby的世界Rails一统江湖,而Python则是一个百花齐放的世界,各种micro-framework.framework不可胜数,不完全 ...

  9. Python开发【第二十二篇】：Web框架之Django【进阶】

    Python开发[第二十二篇]:Web框架之Django[进阶]   猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 ...

随机推荐

  1. vue的基本用法

    公共样式---pc版的404报错 动态src 这个是vue组件template部分 <div class="not-found"> <img :src=" ...

  2. ICEM-带肋圆柱

    原视频下载地址:https://yunpan.cn/cqUj6H9un37F2  访问密码 91af

  3. MongoDB下载不了的问题

    官网上,mongoDB数据库下载不了,搜了半天,在知乎上找到答案:在MongoDB download center中选择community-server,拖到底部有一个all versions bin ...

  4. IIS Express(电脑无管理员权限如何启用VS调试)

    转载页面:https://www.cnblogs.com/xbblogs/p/4756552.html(详细版)  直接按照红色字体步骤执行,其他字体可先忽略 出问题再详细看   1.设置配置文件   ...

  5. mac 不限速下载大文件

    打开终端后,需要在终端处键入一下代码: 「注意:此处代码不完整, 完整版请 关注微信公众号:「100秒分享」,回复编号「334」获取」 cd ~/Downloads && git cl ...

  6. KA，连接池居然这么简单？ 原创： 58沈剑 架构师之路 3月20日

    KA,连接池居然这么简单? 原创: 58沈剑 架构师之路 3月20日

  7. osg model

    osg::ref_ptr<osg::Node> MyOSGLoadEarth::CreateNode() { osg::ref_ptr<osg::Group> _root = ...

  8. java如何压缩多个文件到压缩包，并下载到浏览器？

    java压缩多个文件到压缩包,并下载到浏览器   解决方法: 完整的方法如下,很简单,亲试有效,极力推荐. 我是以流作为文件,而不是file,循环把所有pdf文件压缩到pdf.zip压缩包中. 1.前 ...

  9. java生成二维码打印到浏览器

    java生成二维码打印到浏览器   解决方法: pom.xml的依赖两个jar包: <!-- https://mvnrepository.com/artifact/com.google.zxin ...

  10. 【leetcode_easy】589. N-ary Tree Preorder Traversal

    problem 589. N-ary Tree Preorder Traversal N叉树的前序遍历 首先复习一下树的4种遍历,前序.中序.后序和层序.其中,前序.中序和后序是根据根节点的顺序进行区 ...