博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
『Python Web框架之Django』第几节: AJAX
阅读量:6333 次
发布时间:2019-06-22

本文共 1464 字,大约阅读时间需要 4 分钟。

一. AJAX简介

AJAXAsynchronous Javascript And XML)翻译成中文就是异步的JavascriptXML”。即使用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的请求例子

    
ajax测试
HTML部分代码
from django.shortcuts import render, HttpResponsedef 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上传文件

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

你可能感兴趣的文章
浅谈OS
查看>>
mac下开启docker API远程调用
查看>>
tar 命令的详解
查看>>
Cisco路由器安全配置
查看>>
第十次作业
查看>>
给定一个字符串s,返回去掉子串"mi"后的字符串。
查看>>
Nginx 外的另一选择,轻量级开源 Web 服务器 Tengine 发布新版本
查看>>
Wrod中超链接的一些技巧
查看>>
我的友情链接
查看>>
IP_VFR-4-FRAG_TABLE_OVERFLOW【cisco设备报错】碎片***
查看>>
Codeforces Round #256 (Div. 2) D. Multiplication Table 【二分】
查看>>
ARM汇编指令格式
查看>>
HDU-2044-一只小蜜蜂
查看>>
HDU-1394-Minimum Inversion Number
查看>>
df -h 卡住
查看>>
第七天1
查看>>
[转] createObjectURL方法 实现本地图片预览
查看>>
JavaScript—DOM编程核心.
查看>>
JavaScript碎片
查看>>
Bootstrap-下拉菜单
查看>>