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.rhkb.cn/news/199271.html

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

相关文章

面试题c/c++ --STL 算法与数据结构

面试题c/c++ --STL 算法与数据结构

1.6 STL 模板 模板底层实现&#xff1a;编译器会对函数模板进行两次编译&#xff0c; 在声明的地方对模板代码本身进行编译&#xff0c; 在调用的地方对参数替换后的代码进行编译。 模板传参分析 模板重载 vector 是动态空间&#xff0c; 随着元素的加入&#xff0c; 它的内…
阅读更多...
C练习题_14

C练习题_14

一、单项选择题&#xff08;本大题共 20小题&#xff0c;每小题 2分&#xff0c;共 40分。在每小题给出的四个备选项中&#xff0c;选出一个正确的答案&#xff0c;并将所选项前的字母填写在答题纸的相应位置上。) 以下叙述不正确的是&#xff08;&#xff09; A.一个C源程序可…
阅读更多...
Java源码分析:Guava之不可变集合ImmutableMap的源码分析

Java源码分析:Guava之不可变集合ImmutableMap的源码分析

原创/朱季谦 一、案例场景 遇到过这样的场景&#xff0c;在定义一个static修饰的Map时&#xff0c;使用了大量的put()方法赋值&#xff0c;就类似这样—— public static final Map<String,String> dayMap new HashMap<>(); static {dayMap.put("Monday&q…
阅读更多...
◢Django 分页+搜索

◢Django 分页+搜索

1、搜索数据 从数据库中获取数据&#xff0c;并进行筛选&#xff0c;xx__contains q作为条件&#xff0c;查找的是xx列中有q的所有数据条 当有多个筛选条件时&#xff0c;将条件变成一个字典&#xff0c;传入 **字典 &#xff0c;ORM会自行翻译并查找。 筛选电话号码这一列…
阅读更多...
Go 语言中的map和内存泄漏

Go 语言中的map和内存泄漏

map在内存中总是会增长&#xff1b;它不会收缩。因此&#xff0c;如果map导致了一些内存问题&#xff0c;你可以尝试不同的选项&#xff0c;比如强制 Go 重新创建map或使用指针。 在 Go 中使用map时&#xff0c;我们需要了解map增长和收缩的一些重要特性。让我们深入探讨这一点…
阅读更多...
解决 Python requests 库中 SSL 错误转换为 Timeouts 问题

解决 Python requests 库中 SSL 错误转换为 Timeouts 问题

解决 Python requests 库中 SSL 错误转换为 Timeouts 问题&#xff1a;理解和处理 SSL 错误的关键 在使用Python的requests库进行HTTPS请求时&#xff0c;可能会遇到SSL错误&#xff0c;这些错误包括但不限于证书不匹配、SSL层出现问题等。如果在requests库中设置verifyFalse&…
阅读更多...
【SpringCloud】Eureka基于Ribbon负载均衡的调用链路流程分析

【SpringCloud】Eureka基于Ribbon负载均衡的调用链路流程分析

文章目录 前言1.调用形式2.LoadBalancerInterceptor3.负载均衡流程分析3.1 调用流程图3.2 intercept&#xff08;&#xff09;方法3.3 execute&#xff08;&#xff09;方法3.4 getServer()方法3.4 子类的chooseServer&#xff08;&#xff09;方法3.5 getLoadBalancerStats().…
阅读更多...
ALlegro怎么恢复到初始操作界面？

ALlegro怎么恢复到初始操作界面？

1.View 2.UI Settings 3.Reset UI To Default
阅读更多...
Go vs Rust：文件上传性能比较

Go vs Rust：文件上传性能比较

在本文中&#xff0c;主要测试并比较了Go—Gin和Rust—Actix之间的多部分文件上传性能。 设置 所有测试都在配备16G内存的 MacBook Pro M1 上执行。 软件版本为&#xff1a; Go v1.20.5Rust v1.70.0 测试工具是一个基于 libcurl 并使用标准线程的自定义工具&#xff0c;能…
阅读更多...
Windows核心编程 静态库与动态库

Windows核心编程 静态库与动态库

目录 一、如何保护源码 二、静态库 动态库 概述 三、静态链接库创建与使用 四、动态链接库创建 五、动态链接库的两种调用方式 六、动态链接库的隐式加载 方式一&#xff1a;使用 extern 声明外部函数 方式二&#xff1a;__declspec(dllimport) 声明外部函数 使用宏优…
阅读更多...
Win10 开始菜单、微软app和设置都打不开（未解决）

Win10 开始菜单、微软app和设置都打不开（未解决）

环境&#xff1a; Win10专业版 问题描述&#xff1a; Win10 开始菜单、微软app和设置都打不开,桌面个性话打开就报错&#xff0c;打开个性化该文件没有与之关联的程序来执行该操作 解决方案&#xff1a; 一般造成原因是MS-Settings文件系统错误 1.先重启电脑&#xff08;重…
阅读更多...
List 函数排序操作，用对方法事半功倍！

List 函数排序操作，用对方法事半功倍！

作为一名程序员&#xff0c;以下这些场景你肯定不陌生&#xff0c; 1.数据分析和处理&#xff1a;在处理大量数据时&#xff0c;需要对数据进行排序以进行进一步的分析和处理。例如&#xff0c;在市场调研中&#xff0c;可能需要按照客户的购买频率对客户列表进行排序&#xf…
阅读更多...
如何解决网站被攻击的问题：企业网络攻防的关键路径

如何解决网站被攻击的问题：企业网络攻防的关键路径

在当今数字化时代&#xff0c;企业面临着不断升级的网络威胁&#xff0c;网站遭受攻击的风险也与日俱增。解决网站被攻击的问题对企业发展至关重要&#xff0c;不仅关系到企业的信息安全&#xff0c;也直接影响到企业的声誉和利益。从企业发展的角度出发&#xff0c;我们将探讨…
阅读更多...
Android设计模式--责任链模式

Android设计模式--责任链模式

无善无恶心之体&#xff0c;有善有恶意之动。知善知恶是良知&#xff0c;为善去恶是格物。 一&#xff0c;定义 使多个对象都有机会处理请求&#xff0c;从而避免了请求的发送者和接收者之间的耦合关系。将这些对象连成一条链&#xff0c;并沿着这条链传递该请求&#xff0c;直…
阅读更多...
机器视觉系统选型-定光照强度

机器视觉系统选型-定光照强度

同一个外形结构的光源&#xff0c;光照强度受如下影响&#xff1a; 单颗灯珠的亮度灯珠排列的数量和密度漫射板/防护板的材质&#xff08;透明、半透明、全漫射&#xff09; 在合理范围内提升光照强度&#xff0c;可降低对相机曝光时长的要求 外形结构尺寸相同的两款光源&am…
阅读更多...
elementui表格自定义指令控制显示哪些列可以拖动

elementui表格自定义指令控制显示哪些列可以拖动

Vue.directive(tableBorder, function (el, {value}) {// value允许传字符串数字和数组el.classList.add(z_table_hasBorder)let hasStyle el.querySelector(style)if(hasStyle){hasStyle.remove()}let style document.createElement(style)let str .z_table_hasBorder .el…
阅读更多...
Golang 协程、主线程

Golang 协程、主线程

Go协程、Go主线程 原先的程序没有并发和并行的概念&#xff0c;没有多核的概念&#xff0c;就是一个进程打天下。后面发现这个效率太低了&#xff0c;就搞出了线程&#xff0c;这样极大的发挥CPU的效率&#xff0c;因为硬件总是比软件发展的快。 现在go考虑的是能不能让多核cp…
阅读更多...
【Electron】electron-builder打包失败问题记录

【Electron】electron-builder打包失败问题记录

文章目录 yarn下载的包不支持require()winCodeSign-2.6.0.7z下载失败nsis-3.0.4.1.7z下载失败待补充... yarn下载的包不支持require() 报错内容&#xff1a; var stringWidth require(string-width)^ Error [ERR_REQUIRE_ESM]: require() of ES Module /stuff/node_modules/…
阅读更多...
Github小彩蛋显示自己的README,git 个人首页的 README,readme基本语法

Github小彩蛋显示自己的README,git 个人首页的 README,readme基本语法

先上效果&#x1f447; 代码在下面&#xff0c;流程我放最下面了&#xff0c;思路就是创建一个和自己同名的仓库&#xff0c;要公开&#xff0c;创建的时候会提示小彩蛋你的reademe会展示在你的首页&#xff0c;或许你在这个readme里面的修改都会在你的主页上看到了&#x1f44…
阅读更多...
kubernetes|云原生| 如何优雅的重启和更新pod---pod生命周期管理实务

kubernetes|云原生| 如何优雅的重启和更新pod---pod生命周期管理实务

前言&#xff1a; kubernetes的管理维护的复杂性体现在了方方面面&#xff0c;例如&#xff0c;&#xff50;&#xff4f;&#xff44;的管理&#xff0c;服务的管理&#xff0c;用户的管理&#xff08;&#xff32;&#xff22;&#xff21;&#xff23;&#xff09;&#xf…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023