当前位置： 首页 > news >正文

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

news 2025/7/13 14:40:24

文章目录

  • 一、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只会根据响应码来做处理

相关文章：

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

文章目录 一、Ajax简介二、基于jquery实现Ajax三、使用Ajax注意的问题1.Ajax不要与form表单同时提交2.后端响应格式问题3、使用了Ajax作为请求后的注意事项 一、Ajax简介 AJAX&#xff08;Asynchronous Javascript And XML&#xff09;翻译成中文就是“异步Javascript和XML”。…...

编程日记 2023/11/21 5:46:07

【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().…...

编程日记 2023/11/21 5:45:06

Springboot和Vue+MYSQL项目（基本介绍+前后端结合初步项目）+maven+mybatis

一、基本知识 当我们谈论全栈开发时&#xff0c;通常指的是一个开发者能够处理整个应用程序的开发&#xff0c;包括前端&#xff08;Front-End&#xff09;和后端&#xff08;Back-End&#xff09;的所有层面。这三个基本的领域是&#xff1a; 前端开发&#xff08;Front-End …...

编程日记 2023/11/21 5:44:05

基于单片机K型热电偶温度采集报警系统

**单片机设计介绍&#xff0c; 基于单片机K型热电偶温度采集报警系统 文章目录 一 概要简介系统特点系统组成工作原理应用领域 二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 # 基于单片机K型热电偶温度采集报警系统介绍 简介 该系统是基于单片…...

编程日记 2023/11/21 5:43:03

利用OpenCV做个熊猫表情包 二

之前写了一篇 利用OpenCV做个熊猫表情包吧_Leen的博客-CSDN博客 回想起来觉得有点太弱了&#xff0c;意犹未尽&#xff0c;每次使用需要自己去手动截取人脸&#xff0c;清除黑边什么的才能使用demo去合成表情&#xff0c;无奈之前由于安装的vs&#xff0c;opencv版本都比较低…...

编程日记 2023/11/21 5:42:02

华纳云服务器怎么清理cdn缓存?

清理 CDN(内容分发网络)缓存通常需要通过 CDN 提供商的管理界面或 API 进行操作。不同的 CDN 提供商可能有不同的方法和步骤&#xff0c;以下是一个通用的清理 CDN 缓存的一般步骤&#xff1a; 1. 登录到 CDN 提供商的管理界面&#xff1a; 打开你所使用的 CDN 提供商的网站。 …...

编程日记 2023/11/21 5:41:01

python functools.wraps保留被装饰函数属性

作用 普通装饰器 &#xff0c;会覆盖函数名称&#xff0c;并且 会替换 函数 文档字符串 介绍 functools.wraps(wrapped[, assigned][, updated]) This is a convenience function for invoking partial(update_wrapper, wrappedwrapped, assignedassigned, updatedupdated) …...

编程日记 2023/11/21 5:38:58

【多线程 - 11、死锁】

死锁 1、介绍 在 Java 中使用多线程&#xff0c;就会有可能导致死锁问题。死锁会让程序一直卡住&#xff0c;程序不再往下执行。只能通过中止并重启的方式来让程序重新执行。要尽可能避免死锁的情况发生 2、造成死锁的原因 互斥条件&#xff1a; 同一资源同时只能由一个线程读…...

编程日记 2023/11/21 5:37:57

flask实现session开发

要在Flask应用中实现会话&#xff08;session&#xff09;开发&#xff0c;你可以使用Flask内置的session模块。以下是一个示例代码&#xff0c;演示在Flask应用中启用和使用会话功能&#xff1a; from flask import Flask, session, redirect, url_for, requestapp Flask(__…...

编程日记 2023/11/21 5:36:56

paddle dataset

paddle实现图像旋转 import numpy as np from PIL import Image from matplotlib import pyplot as plt from paddle.vision.transforms import functional as F import cv2imagecv2.imread(./1.jpg) imagecv2.cvtColor(image,cv2.COLOR_BGR2RGB)# 图像旋转 opencv # imgR90 …...

编程日记 2023/11/21 5:35:56

接口自动化测试实战：JMeter+Ant+Jenkins+钉钉机器人群通知完美结合

前言 一、本地JAVA环境安装配置，安装JAVA8和JAVA17 二、安装和配置Jmeter 三、安装和配置ant 四、jmeter + ant配置 五、jenkins安装和配置持续构建项目 六、jenkins配置流程 前言 搭建jmeter+ant+jenkins环境有些前提条件，那就是要先配置好java环境，本地java环境…...

编程日记 2023/11/21 5:34:54

HAL库STM32串口开启DMA接收数据

STM32CubeMx的配置 此博客仅仅作为记录&#xff0c;这个像是有bug一样&#xff0c;有时候好使&#xff0c;有时候不好&#xff0c;所以趁现在好使赶紧记录一下&#xff0c;很多地方用到串口接收数据&#xff0c;DMA又是一种非常好的接收方式&#xff0c;可以节约CPU的时间&…...

编程日记 2023/11/21 5:33:53

Web安全研究（五）

Automated WebAssembly Function Purpose Identification With Semantics-Aware Analysis WWW23 文章结构 introbackgroundsystem design abstraction genapplying abstractionsclassifier data collection and handling data acquisitionstatistics of collected datamodule-…...

编程日记 2023/11/21 5:32:52

2023.11.17-hive调优的常见方式

目录 0.设置hive参数 1.数据压缩 2.hive数据存储格式 3.fetch抓取策略 4.本地模式 5.join优化操作 6.SQL优化(列裁剪,分区裁剪,map端聚合,count(distinct),笛卡尔积) 6.1 列裁剪: 6.2 分区裁剪: 6.3 map端聚合(group by): 6.4 count(distinct): 6.5 笛卡尔积: 7…...

编程日记 2023/11/21 5:31:51

ts 联合react 实现ajax的封装，refreshtoken的功能

react ts混合双打&#xff0c;实现ajax的封装&#xff0c;以及401的特殊处理 import axios from axios import {AMDIN_EXPIRES_KEY,AMDIN_KEY,AMDIN_REFRESH_EXPIRES_KEY,AMDIN_REFRESH_KEY,COMMID_KEY,getToken,removeToken } from ../utils/user-token import { showMessage…...

编程日记 2023/11/21 5:30:49

CISP模拟试题（一）

免责声明 文章仅做经验分享用途，利用本文章所提供的信息而造成的任何直接或者间接的后果及损失，均由使用者本人负责，作者不为此承担任何责任，一旦造成后果请自行承担！！！ 1.下面关于信息安全保障的说法错误的是：C A.信息安全保障的概念是与信息安全的概念同时产生的 …...

编程日记 2023/11/21 5:29:48

轻量封装WebGPU渲染系统示例＜35＞- HDR环境数据应用到PBR渲染材质

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/BasePbrMaterialTest.ts 当前示例运行效果: 微调参数之后的效果: 此示例基于此渲染系统实现&#xff0c;当前示例TypeScript源码如下: export class BasePbrMateri…...

编程日记 2023/11/21 5:28:47

春秋云境靶场CVE-2022-28512漏洞复现(sql手工注入)

文章目录 前言一、CVE-2022-28512靶场简述二、找注入点三、CVE-2022-28512漏洞复现1、判断注入点2、爆显位个数3、爆显位位置4 、爆数据库名5、爆数据库表名6、爆数据库列名7、爆数据库数据 总结 前言 此文章只用于学习和反思巩固sql注入知识&#xff0c;禁止用于做非法攻击。…...

编程日记 2023/11/21 5:27:47

数字化文化的守护之星：十八数藏的非遗创新之道

在数字时代的浪潮中&#xff0c;十八数藏犹如一颗璀璨的守护之星&#xff0c;为传统文化注入了新的生命力。这个非遗创新项目以数字化为工具&#xff0c;以守护为使命&#xff0c;开辟了文化传承的新航道。 十八数藏是文化数字守护的引领者&#xff0c;通过数字技术&#xff0…...

编程日记 2023/11/21 5:26:45

[机缘参悟-119] ：反者道之动与阴阳太极

目录 一、阴阳对立、二元对立的规律 1.1 二元对立 1.2 矛盾的对立与统一 二、阴阳互转、阴阳变化、变化无常 》无序变化和有序趋势的规律 三、阴阳合一、佛魔一体、善恶同源 四、看到积极的一面 五、反者道之动 5.1 概述 5.2 "否极泰来" 5.3 “乐极生悲”…...

编程日记 2023/11/21 5:24:43

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2025/7/13 2:50:35

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/6/18 13:47:59

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/7/13 2:01:13

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2025/7/11 13:52:00

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/7/4 10:27:56

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2025/7/10 23:48:02

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2025/7/6 20:28:07

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/7/12 1:26:06

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

编程新知 2025/7/11 3:24:07

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...

编程新知 2025/7/9 7:41:51