一. 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. CF1188B Count Pairs

    [题目描述] 给定一个质数 \(p\) , 一个长度为 \(n\)n 的序列 \(a = \{ a_1,a_2,\cdots,a_n\}\)一个整数 \(k\). 求所有数对 \((i, j)\) ( ...

  2. yum安装nginx添加upstream_check_module模块

    下载模块 upstream_check_module 查看yum安装nginx版本信息 # nginx -V nginx version: nginx/1.17.0 built by gcc 4.8. ...

  3. Lucene核心数据结构——FST存词典,跳表存倒排或者roarning bitmap 见另外一个文章

    Lucene实现倒排表没有使用bitmap,为了效率,lucene使用了一些策略,具体如下:1. 使用FST保存词典,FST可以实现快速的Seek,这种结构在当查询可以表达成自动机时(PrefixQu ...

  4. 数据库——JavaWEB数据库连接

    一.数据库连接的发展 1.数据库连接 用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建10万次连接,极大 ...

  5. 服务端 CORS 解决跨域

    当协议.域名.端口中任一个不同时产生跨域 CORS 跨域资源共享(Cross-origin resource sharing) 参考资料https://developer.mozilla.org/zh ...

  6. boost 介绍

    简介: Boost库是一个可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的开发引擎之一. Boost库由C++标准委员会库工作组成员发起,其中有些内容有望成为下一代C++标准库内容 ...

  7. 了解有关 in_memory 工作空间的详细信息

    ArcGIS 提供了一个可写入输出要素类和表的内存工作空间.作为将地理处理输出写入磁盘上的某个位置或网络位置的备选方案,可将输出写入内存工作空间中.通常,将数据写入内存工作空间要明显快于写入其他格式( ...

  8. 制作A4纸打印的网页像素大小设置(转)

    公司内做系统,要用A4纸打印东西,A4纸标准时mm,换算成像素不知道.网上找找,找到一篇文章,转一下,备用. A4纸的尺寸是210mm*297mm,也就是21.0cm*29.7cm,而1英寸=2.54 ...

  9. 机器学习 - 算法 - SVM 支持向量机 Py 实现 / 人脸识别案例

    SVM 代码实现展示 相关模块引入 %matplotlib inline import numpy as np import matplotlib.pyplot as plt from scipy i ...

  10. 【PHP】解决数据库查询出来的中文内容显示为问号“??”

    方法一:在数据库连接后执行: mysql_query('SET NAMES utf8'); 代码: $dbconn=mysql_connect("localhost", " ...