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

AJAX学习笔记6 JQuery对AJAX进行封装

news 2026/5/17 23:23:38

AJAX学习笔记5同步与异步理解_biubiubiu0706的博客-CSDN博客

AJAX请求相关的代码都是类似的，有很多重复的代码，这些重复的代码能不能不写，能不能封装一个工具类。要发送ajax请求的话，就直接调用这个工具类中的相关函数即可。

用JS发送AJAX请求回顾

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>AJAX发送GET POST</title>
</head>
<body>
<script type="text/javascript">window.onload=function (){document.getElementById("btn1").onclick=function(){var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(this.readyState==4){if(this.status==200){console.log("发送成功")}}else{console.log("得到错误响应")}}xhr.open("get","/xxxx",true)xhr.send()}document.getElementById("btn2").onclick=function(){var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(this.readyState==4){if(this.status==200){console.log("发送成功")}}else{console.log("得到错误响应")}}var username=document.getElementById("username").valuexhr.open("get","/xxxx?username"+username,true)xhr.send()}document.getElementById("btn3").onclick=function(){var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){if(this.readyState==4){if(this.status==200){console.log("发送成功")}}else{console.log("得到错误响应")}}xhr.open("post","/xxxx"+username,true)xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")var username2=document.getElementById("username2").value;xhr.send("username="+username2)}}
</script><button id="btn1">发送GET无参</button><button id="btn2">发送GRT有参</button>
<input type="text" id="username"><button id="btn3">发送POST有参</button>
<input type="text" id="username2">
</body>
</html>

响应结果一般是个字符串也有可能是responseXML

一般现在都用JSON字符串

那么需要转成JS对象

JSON.parse(this.responseText)

使用JQuery工具类中的AJAX方法来发送请求

引入

$.ajax() 是 jQuery 提供的一个通用 AJAX 请求方法.

$.get() 是 $.ajax() 方法的一个简化版本，专门用于发送 GET 请求。

$.post() 是 $.ajax() 方法的一个简化版本，专门用于发送 POST 请求。

示例

$.get(url, [data], [callback])

$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {console.log(res) // 这里的 res 是服务器返回的数据
})

$.post('http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址{ bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' }, // 提交的数据function(res) { // 回调函数console.log(res)}
)

$.ajax()比较通过,可以发送put,delete请求但是$.get()和$.post()是简化版,暂没有$.put和$.delete的写法

下面来完整的写几个示例

$.get()的写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery发送AJAX请求</title>
</head>
<body>
<!--引入JQuery-->
<script type="text/javascript" src="ajax/js/jquery-3.4.1.js"></script>
<script type="text/javascript">$(function (){//页面加载完毕执行的函数    JQuery的写法  JS的写法--->window.onload=function(){}$("#btn1").click(function(){//JQuery写法    JS的写法  document.getElementById("btn1").onclick=function(){var username=$("#username").val()//var username=document.getElementById("username").value;//发送ajax请求$.get("/ajax/JQGET","username="+username,function(data){console.log(data)$("#div1").html(data)//原来的写法document.getElementById("div1").innerText=data})})})</script>
<button id="btn1">发送AJAX GET请求</button><br>
用户名:<input type="text" id="username"><br>
<div id="div1"></div>
</body>
</html>

如果不想带参数,就把参数去掉

$.ajax()写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>AJAX发送GET请求</title>
</head>
<body>
<script type="text/javascript" src="ajax/js/jquery-3.4.1.js"></script>
<script type="text/javascript">$(function(){//点击事件$("#btn1").click(function(){//发送AJAX请求$.ajax({type:"get",url:"/ajax/JQGET",data:"username="+$("#username").val(),async:true,success:function(data){console.log(data)$("#div1").html(data)}})})})
</script>
<button id="btn1">发送AJAX GET请求</button><br>
用户名:<input type="text" id="username"><br>
<div id="div1"></div>
</body>
</html>

后端随便返回点啥

发送$.post 无参请求

发送$.ajax()post有参数请求

注意

$.get()或者$.post() 方法默认发送的请求是异步的。

如果希望发送的请求可以改变同步或者异步建议使用$.ajax()这种方式

用$.ajax()方式发送请求的示例

AJAX学习笔记6 JQuery对AJAX进行封装

AJAX学习笔记5同步与异步理解_biubiubiu0706的博客-CSDN博客 AJAX请求相关的代码都是类似的，有很多重复的代码，这些重复的代码能不能不写，能不能封装一个工具类。要发送ajax请求的话，就直接调用这个工具类中的相关函数即可。用J…...

编程日记 2023/9/6 18:39:18

阿里云服务器退款规则_退款政策全解析

阿里云退款政策全解析，阿里云退款分为五天无理由全额退和非全额退订两种，阿里云百科以云服务器为例，阿里云服务器包年包月支持五天无理由全额退订，可申请无理由全额退款，如果是按量付费的云服务器直接释放资源即可。阿…...

编程日记 2023/9/6 18:38:17

ExpressLRS开源之基本调试数据含义 1. 源由2. 代码2.1 debugRcvrLinkstats2.2 debugRcvrSignalStats 3. 含义解释3.1 ID(packetCounter),Antenna,RSSI(dBm),LQ,SNR,PWR,FHSS,TimingOffset3.2 IRQ_CNT,RSSI_AVE,SNR_AVE,SNV_MAX,TELEM_CNT,FAIL_CNT 4. 总结5. 参考资料 1. 源由 …...

编程日记 2023/9/6 18:37:16

DOM 简介 | 深入了解DOM

目录一、DOM是什么二、DOM的访问三、DOM节点类型四、DOM的分级今天我们将了解WEB编程中一个重要的概念DOM（Document Object Model）文档对象模型，它帮助我们使用JavaScript（或其他编程语言）操纵文档。一、DO…...

编程日记 2023/9/6 18:36:15

机器学习丨2. 线性回归（Linear Regression）

Author：AXYZdong 硕士在读工科男有一点思考，有一点想法，有一点理性！ 定个小小目标，努力成为习惯！在最美的年华遇见更好的自己！ CSDNAXYZdong，CSDN首发，AXYZdong原创唯…...

编程日记 2023/9/6 18:35:14

python+django企业员工考勤打卡信息管理系统66lgr

本员工信息管理系统以Django作为框架，Python语言，B/S模式以及MySql作为后台运行的数据库。本系统主要包括以下功能模块：员工、部门、员工合同、考勤信息、打卡信息、员工工资等模块。本文着重阐述了员工信息管理系统的分析、设计与实现&…...

编程日记 2023/9/6 18:34:12

【Java Web】论坛帖子添加评论

数据层增加评论数据；修改帖子评论数量； 业务层处理添加评论的业务；先增加评论、在更新帖子的评论数量； 表现层处理添加评论数据的请求；设置添加评论的表单。一、数据层 1.1 CommentMapper.java package com.no…...

编程日记 2023/9/6 18:33:09

如何建设一个安全运营中心（SOC）？

然信息安全管理问题主要是个从上而下的问题，不能指望通过某一种工具来解决，但良好的安全技术基础架构能有效的推动和保障信息安全管理。随着国内行业IT应用度和信息安全管理水平的不断提高，企业对于安全管理的配套设施如安全运营中心&#xf…...

编程日记 2023/9/6 18:32:08

如何以Base64形式存储、返回图片数据

在Java中，可以使用Base64类来将图片转换为Base64编码。下面是一个示例代码： Java代码直接处理： import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.util.Base64; public class ImageToBase64…...

编程日记 2023/9/6 18:31:07

【大模型】自动化问答生成：使用GPT-3.5将文档转化为问答对

自动化问答生成：使用GPT-3.5将文档转化为问答对正文步骤1：准备工作步骤2：编写Python脚本总结当我们需要将大段文档转化为问答对时，OpenAI的GPT-3.5模型提供了一个强大的工具。这个教程将向您展示如何编写一个Python脚本&#x…...

编程日记 2023/9/6 18:30:06

普通平衡树 Splay

Splay 简介 Splay（伸展树），又叫做分裂树，是一种自调整形式的二叉查找树，满足二叉查找树的性质：一个节点左子树的所有节点的权值，均小于这个节点的权值。且其右子树所有节点的权值，均…...

编程日记 2023/9/6 18:29:05

复旦-华盛顿EMBA：走近亿咖通科技，探寻汽车智能化的科创“密码”

6月20日，应复旦大学-华盛顿大学EMBA项目18班校友周靖的邀请，项目校友参访了科创企业ECARX亿咖通科技。作为该公司资深副总裁、中国首席财务官，周靖带领大家通过产品演示、实车驾驶和交流对话探寻汽车智能化的科创“密码”，近距离感…...

编程日记 2023/9/6 18:28:04

学习心得07：C#

之前也没有看过C#的书，C#的程序倒是搞了一些。好在项目不大，我又会套路。 C#很象是JAVA。好像就是JAVA出来之后，微软抄的。好东西就要学习，这不丢脸。我倒是想，有没有办法把JAVA和C#进行映射，然后直接编译…...

编程日记 2023/9/6 18:27:03

importlib的使用、9个视图子类、视图集、drf之路由、drf之请求响应回顾、GenericViewSet相关流程图

一 drf之请求响应回顾 # 1 drf请求-请求对象：data，query_params，其他跟之前一样，FILES-默认：支持三种编码-局部配置：视图类中-from rest_framework.parsers import JSONParser, FormParser, MultiPartPars…...

编程日记 2023/9/6 18:26:02

国际站阿里云服务器远程桌面密码错误怎么办？苹果手机如何远程登录？

阿里云服务器是云计算领域的一种重要服务，它可以帮助用户在云端部署和管理自己的应用程序和网站。但是，有时候用户可能会遇到远程桌面密码错误的问题，导致无法登录到服务器。本文将介绍一些解决办法，以及如何使用苹果手机远程登录…...

编程日记 2023/9/6 18:24:59

CRMEB多端多语言系统文件上传0Day代审历程

Git仓库： https://github.com/crmeb/CRMEB简介： 两天攻防中，某政局子公司官网后台采用的CRMEB开源商城CMS，挺奇葩，别问怎么总让我碰到这种东西，我也不知道，主打的就是一个魔幻、抽象。最后通过…...

编程日记 2023/9/6 18:23:58

孙哥Spring源码第18集

第18集 refresh()-invokeBeanFactoryPostProcessor-二-ConfigurationClassPostProcessor的处理逻辑【视频来源于：B站up主孙帅suns Spring源码视频】【微信号：suns45】 1、为什么PropertySource先处理？ 因为Conponent A在处理的过程中要把…...

编程日记 2023/9/6 18:22:57

【STM32】文件系统FATFS与Flash的初步使用

文件系统简介简介可以不看，直接看移植步骤文件系统是介于应用层和底层间的模糊层。底层提供API，比如说使用SDIO或者SPI等读写一个字节。文件系统把这些API组合包装起来，并且提供一些列函数，我们可以使用这些函数进行更进一步的…...

编程日记 2023/9/6 18:21:57

Android Glide in RecyclerView，only load visible item when page return，Kotlin

Android Glide in RecyclerView，only load visible item when page return，Kotlin base on this article： Android Glide preload RecyclerView切入后台不可见再切换可见只加载当前视野可见区域item图片，Kotlin_zhangphil的博客…...

编程日记 2023/9/6 18:20:55

【SCI征稿】3个月左右录用！计算机信息技术等领域均可，如机器学习、遥感技术、人工智能、物联网、人工神经网络、数据挖掘、图像处理

计算机技术类SCIE&EI 【期刊简介】IF：1.0-2.0，JCR4区，中科院4区【检索情况】SCIE&EI 双检，正刊【参考周期】期刊部系统内提交，录用周期3个月左右，走完期刊部流程上线【征稿领域】计算机信息…...

编程日记 2023/9/6 18:19:54

【HarmonyOS 6.1 全场景实战】《灵犀厨房》之【营养分析引擎】计算个性化卡路里建议：给《灵犀厨房》装上“营养大脑”

【营养分析引擎】计算个性化卡路里建议：给《灵犀厨房》装上“营养大脑” 摘要：从“爱吃什么”到“该吃什么”，是《灵犀厨房》进化的关键一步。上一篇我们刚打通了 Health Kit 数据，今天，我们就要基于 Mifflin-St Jeor …...

编程新知 2026/5/17 9:02:16

NVIDIA Profile Inspector完整指南：200+隐藏设置解锁显卡极致性能

NVIDIA Profile Inspector完整指南：200隐藏设置解锁显卡极致性能【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector 还在为游戏画面撕裂、输入延迟过高而烦恼吗？想要彻底掌控NVIDIA…...

编程新知 2026/5/17 8:34:37

如何用Sunshine打造个人游戏云：终极自托管游戏串流解决方案

如何用Sunshine打造个人游戏云：终极自托管游戏串流解决方案【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 你是否曾经梦想在任何设备上畅玩PC游戏？无论是想…...

编程新知 2026/5/17 8:06:30

从GitHub克隆到点亮LED：手把手教你用Ubuntu编译调试别人的STM32工程

从GitHub克隆到点亮LED：手把手教你用Ubuntu编译调试别人的STM32工程在开源硬件社区，GitHub上每天都有大量优秀的STM32项目被分享——从智能家居控制器到四轴飞行器飞控系统。但当开发者满怀期待地git clone后，却常常在第一步"编译通过&…...

编程新知 2026/5/17 6:41:08

数据中心碳足迹与可靠性优化框架解析

1. 数据中心碳足迹与可靠性优化的挑战现代数据中心已成为数字经济的动力引擎，但伴随算力需求的爆炸式增长，其能源消耗与碳排放问题日益凸显。根据最新统计，全球数据中心年耗电量已达4600亿度，占全球总用电量的2%。随着大语言模型…...

编程新知 2026/5/17 5:48:35

WipperSnapper+Adafruit IO：无代码物联网开发实战，从传感器到云端自动化

1. 项目概述与核心价值如果你和我一样，在物联网（IoT）项目初期，常常被复杂的嵌入式编程、网络协议和云平台对接搞得焦头烂额，那么今天分享的这个实战项目，或许能让你眼前一亮。我们这次不谈复杂的代码&#…...

编程新知 2026/5/17 5:37:42

未来之窗昭和仙君(九十四)用户指引自助教学源码—东方仙盟

软件教学引导功能说明书未来之窗昭和仙君 - cyberwin_fairyalliance_webquery一、功能概述软件教学引导功能主要用于为用户提供软件操作的引导，通过一系列步骤逐步引导用户完成软件的重要操作。该功能会创建遮罩层、高亮框和提示框，引导用户点击特定元素…...

编程新知 2026/5/17 5:11:10

韩国市场合规语音交付迫在眉睫！ElevenLabs韩文生成必须配置的4项GDPR+KCC隐私开关

更多请点击： https://intelliparadigm.com 第一章：韩国市场语音AI合规落地的紧迫性与战略意义韩国《个人信息保护法》（PIPA）于2023年修订后，明确将语音生物特征数据列为“敏感信息”，要求语音AI系统在采集…...

编程新知 2026/5/17 3:35:31

ELASTIC：MCU目标检测的NAS架构搜索与优化

1. ELASTIC：面向微控制器的目标检测架构搜索革命在边缘计算领域，微控制器（MCU）上的目标检测一直面临着内存、算力和能耗的三重挑战。传统手工设计的轻量级模型（如Tiny-YOLO或MobileNet-SSD）往往需要大量试错…...

编程新知 2026/5/17 2:45:39

湿版摄影风格失效的5个致命误区，第4个连Midjourney官方文档都未披露——基于217组AB测试的权威归因报告

更多请点击： https://intelliparadigm.com 第一章：湿版摄影风格失效的5个致命误区，第4个连Midjourney官方文档都未披露——基于217组AB测试的权威归因报告为何“wet plate collodion”提示词突然失灵？ 在 Midjourney v6.1 及 N…...

编程新知 2026/5/17 2:11:32

相关文章：