Ajax基础（应用场景｜jquery实现Ajax｜注意事项）

文章目录

  • 一、Ajax简介
  • 二、基于jquery实现Ajax
  • 三、使用Ajax注意的问题
    • 1.Ajax不要与form表单同时提交
    • 2.后端响应格式问题
    • 3、使用了Ajax作为请求后的注意事项

一、Ajax简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互也是用XML进行数据传输（当然，传输的数据不只是XML，目前更多的使用Json数据）。
（XML应用于Web开发的许多方面，常用于简化数据的存储和共享）

	AJAX不是什么新的编程语言，而是一种使用现有标准的新方法AJAX最大的优点就是不需要重新加载整个页面的情况下，可以与服务器交换数据并更新网页内容（简单来说就是，在网页前端刚输入完数据，后端其实已经验证完数据了，不需要等点击提交了）AJAX不需要任何浏览器插件，但需要用户运行Javascript在浏览器上执行1.AJAX使用Javascript技术向服务器发公司异步请求2.AJAX请求无需刷新整个页面3.因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AjAX性能高。

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

AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；(这一特点给用户的感受是在不知不觉中完成请求和响应过程的)

常见的使用场景
在这里插入图片描述

注册用户时，会根据用户输入的命令关键字，自动提示改关键字是否通过检验

很多网站注册的时候都会使用到AJAX技术，当文本框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应到的结果响应给浏览器，期间浏览器是不用刷新的，最后把后端返回的结果展示出来。

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

二、基于jquery实现Ajax

目前Ajax一般不会使用原生Javascript来编写，因为需要考虑不同浏览器的兼容性。我们这里通过jquery来实现，更简单、不需要考虑不同浏览器引发的兼容问题。

过程：我们通过在前端向一个URL发送Ajax请求，来让后端处理这个请求后返回数据给Ajax接收。

这里用一个案例来代入：
通过Ajax，实现前端输入两个数字，服务器做加法，返回到前端页面

先在Django配置路由

	from django.conf.urls import urlfrom django.contrib import adminfrom app import viewsurlpatterns = [url(r'^admin/', admin.site.urls),url(r'^index/', views.index),url(r'^sum/', views.sums),  # ajax会向这个路由提交请求，执行sums视图函数]

注意：一定要在settings.py配置文件里面注释中间件的一行内容
在这里插入图片描述
这行代码的作用后续在讲解，目前先注释掉，不然请求会提交不成功！

views.py处理请求

	from django.shortcuts import render,HttpResponsedef index(request):  # 返回一个index页面return render(request,'index.html')def sums(request):  # 处理ajax请求num1 = int(request.POST.get('num1'))num2 = int(request.POST.get('num2'))return HttpResponse(num1+num2)  # 返回计算后的值

index.html文件，定义Ajax与后端进行交互

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script><style>*{margin-top:20px;margin-left:20px;}</style>
</head>
<body>
<input type="text" id="num1" placeholder="数字1">+
<input type="text" id="num2" placeholder="数字2">=
<input type="text" id="num3" placeholder="总和"><button id="btn">计算</button><script>$('#btn').click(function (){  // 当按钮被点击时触发一个匿名函数var num1 = $('#num1').val()  // 点击按钮后获取id属性值为num1的值var num2 = $('#num2').val()  // 点击按钮后获取id属性值为num2的值$.ajax({  // 定义ajax发送请求url:'/sum/',  // 请求发送的地址  有三种填写方式，与form标签的action一致method:'post',  // 请求发送的方式data: {'num1':num1,'num2':num2},  // 请求携带的数据success:function(data){  // 异步等待，当后端响应成功会回调执行匿名函数，并将数据传递给data参数$('#num3').val(data)  // 将数据设置给id属性值为num3的文本框}// 使用ajax交互，那么后端返回的数据会被data接收，不在直接影响整个浏览器页面})})
</script>
</body>
</html>

我们已经编写好了一个简单的小案例，通过Ajax向后端发送请求，后端处理完数据响应给Ajax，再将得到的数据在页面使用以此来达到局部更新页面效果。而form表单要达到这一效果需要全局更新数据，使用重定向来实现。

得到的结果：
在这里插入图片描述

三、使用Ajax注意的问题

1.Ajax不要与form表单同时提交

  • 如果在form表单中，写了button按钮或者input是submit类型的话，点击会触发form表单的提交。
  • 如果点击按钮既触发Ajax又触发了form表单的提交，那么就会发送两个请求，导致页面数据可能错乱或者不显示问题。
  • 要是无可避免同时使用Ajax提交form表单下的表单控件时，form表单内的input按钮请使用button类型，这样该按钮绑定了Ajax请求的话，就只会提交Ajax请求，而不是form
	<!--这种类型的按钮，无法触发form表单的提交--><input type="button" value="提交"><!--如果该button在form内，则会触发form表单的提交--><button>提交</button>

2.后端响应格式问题

  • 后端如果是通过非JsonResponse返回值的话，响应格式为text/html，前端得到数据后需要手动转换成对象的形式。
    if request.is_ajax():import jsond = {'name':'jack','age':18}d_json = json.dumps(d,ensure_ascii=False)return HttpResponse(d_json)

就算我们在后端已经将字典转换成了Json格式，但是通过HttpResponse返回以后，还是变成了一堆字符串到前端，并且响应格式为：text/html。

<button id="btn">点击发送Ajax请求</button>
<script>$('#btn').click(function(){$.ajax({url:'/home/',method:'post',data:{'name':'tom'},success:function (data){console.log(data)console.log(data.name)  // 如果返回的是Json的话这样是可以打印出来的}})})
</script>

查看后端响应的数据格式:

在这里插入图片描述
控制台结果：
在这里插入图片描述
需要在前端手动将数据转换成JSON格式，那么下次就会先将数据转换成JSON，然后再打印了

	success:function (data){data = JSON.parse(data)console.log(data)console.log(data.name)}
  • 如果我们是通过JsonResponse返回的话，那么响应状态码就会是application/json，并且在Ajax内接收到的也会是一个JSON格式的数据
	from django.http import JsonResponsedef home(request):if request.is_ajax():import jsond = {'name':'jack','age':18}return JsonResponse(d)return render(request,'home.html')

Ajax内接收到以后不需要手动转换成JSON格式

	success:function (data){console.log(data)console.log(data.name)}

查看响应头编码格式
在这里插入图片描述
控制台打印效果：
在这里插入图片描述

总结：

  1. 后端如果使用retrun JsonResponse(d)，前端不能反序列化，直接当成对象使用
  2. 后端使用return HttpResponse(d)，前端需要自己反序列化：data=JSON.parse(data)
  3. 后端使用return HttpResponse(d)，前端不反序列化，需要指定参数：datatype：‘json’

3、使用了Ajax作为请求后的注意事项

  • 后端不要返回render、redirect、HttpResponse。因为这些内容会被统一当做字符串返回给Ajax
	def test(request):if request.is_ajax():return render(request,'login.html')return render(request,'test.html')

控制台打印效果：
在这里插入图片描述

总结：使用了AJax作为请求以后，建议使用JsonResponse返回数据，虽说最终还是通过HttpResponse返回到web的，但是JsonResponse内部就做了响应格式的转换

在这里插入图片描述

这种和我们直接通过HttpResponse返回一个JSON格式数据是不一样的。AJax只会根据响应码来做处理

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/152684.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python爬虫技术系列-03/4flask结合requests测试静态页面和动态页面抓取

Python爬虫技术系列-03/4flask结合requests测试静态页面和动态页面抓取

python构建web服务 flask内容参考:Flask框架入门教程&#xff08;非常详细&#xff09; flask安装与运行测试 安装flask pip install flask创建一个webapp.py文件&#xff0c;内容如下 from flask import Flask# 用当前脚本名称实例化Flask对象&#xff0c;方便flask从该脚…
阅读更多...
OpenHarmony Axios组件使用过程中，Api9不适配问题

OpenHarmony Axios组件使用过程中，Api9不适配问题

大家好&#xff0c;我是【八戒&#xff0c;你又涨价了哎】 以下是我个人在学习OpenHarmony过程中的分享&#xff0c;请大家多多指教 目录 问题描述 解决方法 问题描述 使用axios组件的时候&#xff0c;把应用部署到开发板&#xff0c;提示Api9不适配 解决方法 对这类版本不…
阅读更多...
基于Docker的安装和配置Canal

基于Docker的安装和配置Canal

基本介绍 Canal介绍&#xff1a;Canal 是用 Java 开发的基于数据库增量日志解析&#xff0c;提供增量数据订阅&消费的中间件&#xff08;数据库同步需要阿里的 Otter 中间件&#xff0c;基于 Canal&#xff09;。 Canal背景&#xff1a;阿里巴巴 B2B 公司&#xff0c;因为…
阅读更多...
AI绘画使用Stable Diffusion（SDXL）绘制三星堆风格的图片

AI绘画使用Stable Diffusion（SDXL）绘制三星堆风格的图片

一、前言 三星堆文化是一种古老的中国文化&#xff0c;它以其精湛的青铜铸造技术闻名&#xff0c;出土文物中最著名的包括青铜面具、青铜人像、金杖、玉器等。这些文物具有独特的艺术风格&#xff0c;显示了高度的工艺水平和复杂的社会结构。 青铜面具的巨大眼睛和突出的颧骨&a…
阅读更多...
【Web】Ctfshow Nodejs刷题记录

【Web】Ctfshow Nodejs刷题记录

目录 ①web334 ②web335 ③web336 ④web337 ⑤web338 ⑥web339 ⑦web340 ⑧web341 ⑨web342-343 ⑩web344 ①web334 进来是一个登录界面 下载附件&#xff0c;简单代码审计 表单传ctfshow 123456即可 ②web335 进来提示 get上传eval参数执行nodejs代码 payload: …
阅读更多...
【力扣面试经典150题】（链表）K 个一组翻转链表

【力扣面试经典150题】（链表）K 个一组翻转链表

题目描述 力扣原文链接 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只…
阅读更多...
技术分享 | 如何写好测试用例？

技术分享 | 如何写好测试用例？

对于软件测试工程师来说&#xff0c;设计测试用例和提交缺陷报告是最基本的职业技能。是非常重要的部分。一个好的测试用例能够指示测试人员如何对软件进行测试。在这篇文章中&#xff0c;我们将介绍测试用例设计常用的几种方法&#xff0c;以及如何编写高效的测试用例。 ## 一…
阅读更多...
vue和uni-app的递归组件排坑

vue和uni-app的递归组件排坑

有这样一个数组数据&#xff0c;实际可能有很多级。 tree: [{id: 1,name: 1,children: [{ id: 2, name: 1-1, children: [{id: 7, name: 1-1-1,children: []}]},{ id: 3, name: 1-2 }]},{id: 4,name: 2,children: [{ id: 5, name: 2-1 },{ id: 6, name: 2-2 }]} ]要渲染为下面…
阅读更多...
春秋云境靶场CVE-2022-30887漏洞复现(任意文件上传漏洞)

春秋云境靶场CVE-2022-30887漏洞复现(任意文件上传漏洞)

文章目录 前言一、CVE-2022-30887描述和介绍二、CVE-2021-41402漏洞复现1、信息收集2、找可能可以进行任意php代码执行的地方3、漏洞利用找flag 总结 前言 此文章只用于学习和反思巩固渗透测试知识&#xff0c;禁止用于做非法攻击。注意靶场是可以练习的平台&#xff0c;不能随…
阅读更多...
C语言中的指针（上）

C语言中的指针（上）

目录 一、基本概念 1.变量的存储空间 2.定义指针 3.引用与解引用 二、指针的算术运算、类型以及通用指针 1.指针的算数运算 2.指针类型以及通用型指针 三、指向指针的指针&#xff08;pointers to pointers&#xff09; 四、函数传值以及传引用 1.局部变量 2.从存储地…
阅读更多...
gitlab环境准备

gitlab环境准备

1.准备环境 gitlab只支持linux系统&#xff0c;本人在虚拟机下使用Ubuntu作为操作系统&#xff0c;gitlab镜像要使用和操作系统版本对应的版本&#xff0c;(ubuntu18.04,gitlab-ce_13.2.3-ce.0_amd64 .deb) book100ask:/$ lsb_release -a No LSB modules are available. Dist…
阅读更多...
机器学习二元分类 二元交叉熵 二元分类例子

机器学习二元分类 二元交叉熵 二元分类例子

二元交叉熵损失函数 深度学习中的二元分类损失函数通常采用二元交叉熵&#xff08;Binary Cross-Entropy&#xff09;作为损失函数。 二元交叉熵损失函数的基本公式是&#xff1a; L(y, y_pred) -y * log(y_pred) - (1 - y) * log(1 - y_pred)其中&#xff0c;y是真实标签&…
阅读更多...
中贝通信-603220 三季报分析（20231120）

中贝通信-603220 三季报分析（20231120）

中贝通信-603220 基本情况 公司名称&#xff1a;中贝通信集团股份有限公司 A股简称&#xff1a;中贝通信 成立日期&#xff1a;1999-12-29 上市日期&#xff1a;2018-11-15 所属行业&#xff1a;软件和信息技术服务业 周期性&#xff1a;1 主营业务&#xff1a;通信网络技术服务…
阅读更多...
通信网络安全防护定级备案流程介绍（附流程图）

通信网络安全防护定级备案流程介绍（附流程图）

通信网络安全防护定级备案是拥有增值电信业务经营许可证并且有开展电信业务的企业要做的一件事情。刚接触这块的家人们在填报操作的时候可能对具体通信网络安全防护定级备案流程还不是很清楚&#xff0c;所以就给大家画张具体的流程图吧&#xff0c;可以更加直观的了解。 通信…
阅读更多...
go语言学习-go环境安装

go语言学习-go环境安装

1、安装Go 1.1 下载安装 go官网 找对应电脑的版本进行安装即可。 点击安装包&#xff0c;直接下一步下一步即可&#xff0c;安装目录可以自行设置一下。 1.2 验证 windows通过cmd验证。 linux或者mac可以通过自带终端执行测试。 2、配置环境变量 2.1 windows 找到系统…
阅读更多...
HarmonyOS开发(四)：UIAbility组件

HarmonyOS开发(四)：UIAbility组件

1、UIAbility概述 UIAbility 一种包含用户界面的应用组件用于与用户进行交互系统调度的单元为应用提供窗口在其中绘制界同 注&#xff1a;每一个UIAbility实例&#xff0c;都对应一个最近任务列表中的任务。 一个应用可以有一个UIAbility也可以有多个UIAbility。 如一般的…
阅读更多...
深度学习YOLO安检管制物品识别与检测 - python opencv 计算机竞赛

深度学习YOLO安检管制物品识别与检测 - python opencv 计算机竞赛

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络4 Yolov55 模型训练6 实现效果7 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习YOLO安检管制误判识别与检测 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&…
阅读更多...
【论文阅读】SPARK：针对视觉跟踪的空间感知在线增量攻击

【论文阅读】SPARK：针对视觉跟踪的空间感知在线增量攻击

SPARK: Spatial-Aware Online Incremental Attack Against Visual Tracking introduction 在本文中&#xff0c;我们确定了视觉跟踪对抗性攻击的一个新任务&#xff1a;在线生成难以察觉的扰动&#xff0c;误导跟踪器沿着不正确的&#xff08;无目标攻击&#xff0c;UA&#x…
阅读更多...
设计模式--模板方法外观模式

设计模式--模板方法外观模式

模板方法模式 场景&#xff1a;需使用代码方式实现&#xff0c;考完试后&#xff0c;将各个学生的试卷及答案誊抄一份。 假如有两个学生的试卷誊抄完毕. // 学生A public class TestPaperA {// 试题1public void testQuestion1() {System.out.println("问题一:XXXXXXXX…
阅读更多...
《opencv实用探索·一》QT+opencv实现图片拼接和Mat转QImage

《opencv实用探索·一》QT+opencv实现图片拼接和Mat转QImage

本文利用opencv实现了几个好用的功能&#xff0c;包含两个文件&#xff0c;如下&#xff1a; 源码放在文章末尾 imageProcessing类包含三个功能&#xff1a; 1、图像拼接 cv::Mat imageMosaic(cv::Mat mat1, cv::Mat mat2, MosaicMode mosaicMode);mat1和mat2为两个待拼接的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023