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

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

news 文章来源：https://blog.csdn.net/tiantiantbtb/article/details/132667184 2025/5/6 10:32:45

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

Golang 中的 crypto/ecdh 包详解

什么是 ECDH 算法？ ECDH（Elliptic Curve Diffie-Hellman）算法是一种基于椭圆曲线的密钥交换协议，用于安全地协商共享密钥（Secret Key），步骤如下： 1. 选择椭圆曲线：ECDH…...

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

系统学习live555

文章目录系统学习live555系统学习LIVE555的步骤：1.了解基本概念：2.**查看官方文档：**3.**下载和编译库：**4.**阅读示例代码：**5.**了解库结构：**6.**创建简单项目：**7.**阅读更多文档&#xff…...

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

Linux下的系统编程——进程的执行与回收（八）

前言： 前面我们对进程已经有了一个初步的了解与认识，现在让我们学习一下进程中一些函数的具体使用，比如exec可以执行一些指定的程序，wait / waitpid可以回收子进程，什么是孤儿进程，什么是僵尸进程&#xf…...

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

第十九章 ObjectScript - 执行例程

文章目录第十九章 ObjectScript - 执行例程执行例程New 命令第十九章 ObjectScript - 执行例程执行例程执行例程时，使用DO命令，如下所示: do ^routinename要执行一个过程、函数或子程序(不访问其返回值)，可以使用以下命令: do label^ro…...

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

Podman安装与使用

1.Podman简介 Podman是一个无守护进程的容器引擎，用于在Linux系统上开发、管理和运行OCI容器。 Podman的主要功能包括： 创建和管理容器：Podman可以创建、启动、停止和删除容器，以及管理容器的生命周期。容器镜像管理&#xff1…...

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

C++ 嵌套循环

一个循环内可以嵌套另一个循环。C 允许至少 256 个嵌套层次。语法 C 中嵌套 for 循环语句的语法： for ( init; condition; increment ) {for ( init; condition; increment ){statement(s);}statement(s); // 可以放置更多的语句 }C 中嵌套 while 循环语句的…...

编程日记 2023/9/6 18:13:44

锁（ ReentrantLock，Synchronized）

1.lock和synchronized 语法层面 synchronized 是关键字，源码在 jvm 中，用 c 语言实现； Lock 是接口，源码由 jdk 提供，用 java 语言实现； 使用 synchronized 时，退出同步代码块锁会自动释放&…...

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

主频计算-架构真题（二十三）

某文件系统采用多级索引结构，若磁块大小为4K字节，每个块号需占4个字节，那么采用二级索引结构时的文件最大长度可占用（）个物理块。 1、1024 2、1024*1024 3、2048*2048 4、4096*4096 答案：B 解析&…...

编程日记 2023/9/6 18:11:40

docker安装redis实操记录

1.Docker拉取镜像 docker pull redis2.Docker挂载配置文件创建挂载文件夹 mkdir -p /home/redis/data下载默认配置文件 redis.conf 3.启动redis 容器 docker run --restartalways --log-opt max-size100m --log-opt max-file2 -p 6379:6379 --name redis -v /home/redi…...

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

MobaXterm 突破14个session限制

通常情况下：随着工作时间的增长，我们会保存许许多多的linux到本地的mobastream，然后当超过14个，就会被被限制，这个会让人很头疼。 1. 安装python，配置好环境变量测试安装成功： 2. 基于项目进行…...

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

相关文章：