分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

Django基础之Ajax简介

发布时间:2023-09-06 02:23责任编辑:蔡小小关键词:Ajax

Ajax(Asynchronous JavaScript And XML)翻译成中文就是“异步的JavaScript和XML”。即使用JavaScript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。

Ajax不是新的编程语言,而是一种使用现有标准的新方法。

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

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

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

1. 示例:

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

 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<meta name="viewport" 6 ??????????content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 ????<meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 ????<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 9 ????<title>Document</title>10 </head>11 <body>12 <h2>Ajax计算</h2>13 <input type="text" id="text1">+14 <input type="text" id="text2">=15 <input type="text" id="result">16 <button type="submit" id="button1">计算</button>17 <script>18 ????$("#button1").click(function () {19 ????????var t1 = $("#text1").val();20 ????????var t2 = $("#text2").val();21 ????????$.ajax({22 ????????????url:‘/calc/‘,23 ????????????type: ‘post‘,24 ????????????data: {25 ????????????????‘t1‘: t1,26 ????????????????‘t2‘: t227 ????????????},28 ????????????success: function(res){29 ????????????????$("#result").value(res)30 ????????????}31 ????????})32 ????})33 </script>34 </body>35 </html>
html代码
 1 from django.shortcuts import render, HttpResponse 2 ?3 def index(request): 4 ????return render(request, "index.html") 5 ?6 def calc(request): 7 ????t1 = int(request.POST.get("t1")) 8 ????t2 = int(request.POST.get("t2")) 9 10 ????res = t1 + t211 ????return HttpResponse(res)
views.py
 1 from django.conf.urls import url 2 from django.contrib import admin 3 from app01 import views 4 ?5 urlpatterns = [ 6 ????url(r‘^admin/‘, admin.site.urls), 7 ?8 ????url(r"^/index/", views.index), 9 ????url(r‘^/calc/‘, views.calc)10 ]
urls.py

2. Ajax常用应用情景

搜索引擎根据用户输入的关键字,自动提示检索关键字。

还有一个很重要的应用场景就是注册的时候的用户名查重。

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

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

当输入用户名后,把光标移动到其他表单项上时,浏览器会使用Ajax技术向服务器发出请求,服务器会查询名为lemontree7777777的用户是否存在,最终服务器返回true表示名为lemontree7777777的用户已经存在了,浏览器在得到结果后显示“用户名已被注册!”

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

3. Ajax的优缺点

3.1 优点

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

3.2 缺点

滥用技术,造成服务器压力过大

 

Django基础之Ajax简介

原文地址:https://www.cnblogs.com/yang-wei/p/10008695.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved