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

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

news 2025/7/10 3:46:07

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请求相关的代码都是类似的&#xff0c;有很多重复的代码&#xff0c;这些重复的代码能不能不写&#xff0c;能不能封装一个工具类。要发送ajax请求的话&#xff0c;就直接调用这个工具类中的相关函数即可。 用J…...

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

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

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

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

ExpressLRS开源之基本调试数据含义

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&#xff08;Document Object Model&#xff09;文档对象模型&#xff0c;它帮助我们使用JavaScript&#xff08;或其他编程语言&#xff09;操纵文档。 一、DO…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在Java中&#xff0c;可以使用Base64类来将图片转换为Base64编码。下面是一个示例代码&#xff1a; Java代码直接处理&#xff1a; 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将文档转化为问答对

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

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

普通平衡树 Splay

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

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

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

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

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

学习心得07：C#

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

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

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

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

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

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

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

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

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

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

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

孙哥Spring源码第18集

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

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

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

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

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

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

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

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

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

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

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

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/6/20 18:20:46

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/7/9 10:36:37

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2025/7/9 8:17:40

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/7/8 11:33:44

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/7/7 8:27:40

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

编程新知 2025/7/5 22:55:20

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

编程新知 2025/7/9 17:53:33

深度解析云存储：概念、架构与应用实践

在数据爆炸式增长的时代&#xff0c;传统本地存储因容量限制、管理复杂等问题&#xff0c;已难以满足企业和个人的需求。云存储凭借灵活扩展、便捷访问等特性&#xff0c;成为数据存储领域的主流解决方案。从个人照片备份到企业核心数据管理&#xff0c;云存储正重塑数据存储与…...

编程新知 2025/7/9 23:20:30

从0开始学习R语言--Day17--Cox回归

Cox回归 在用医疗数据作分析时&#xff0c;最常见的是去预测某类病的患者的死亡率或预测他们的结局。但是我们得到的病人数据&#xff0c;往往会有很多的协变量&#xff0c;即使我们通过计算来减少指标对结果的影响&#xff0c;我们的数据中依然会有很多的协变量&#xff0c;且…...

编程新知 2025/7/8 11:07:02