【Java 进阶篇】Ajax 实现——JQuery 实现方式 `ajax()`

在这里插入图片描述

嗨,亲爱的读者们!欢迎来到这篇关于使用 jQuery 中的 ajax() 方法进行 Ajax 请求的博客。在前端开发中,jQuery 提供了简便而强大的工具,其中 ajax() 方法为我们处理异步请求提供了便捷的解决方案。无需手动创建 XMLHttpRequest 对象,只需几行代码,就能完成数据的发送和接收。在这篇文章中,我们将深入探讨 ajax() 方法的使用,同时为你呈现丰富的实例。

什么是 Ajax?

在开始讲解 jQuery 的 ajax() 方法之前,让我们先回顾一下 Ajax 的基础知识。Ajax,即 Asynchronous JavaScript and XML,是一种用于创建异步请求的技术。通过 Ajax,我们能够在不刷新整个页面的情况下,与服务器进行数据交互,从而提高用户体验。

jQuery 的 ajax() 方法

jQuery 的 ajax() 方法是一个多功能、强大的工具,用于发起 Ajax 请求。它具有简单易用的接口,允许我们在不同的场景中进行各种异步操作。接下来,让我们通过一系列实例,深入了解这个方法的各种用法。

基本用法

首先,我们来看一个最基本的例子。假设我们要向服务器请求一段文本数据:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery ajax() 方法基本用法</title><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body><button id="getDataButton">获取数据</button><div id="dataContainer"></div><script>// 等待文档加载完成$(document).ready(function () {// 监听按钮点击事件$("#getDataButton").click(function () {// 使用 ajax() 方法发起 GET 请求$.ajax({url: "https://jsonplaceholder.typicode.com/posts/1",method: "GET",success: function (data) {// 请求成功时的处理$("#dataContainer").text(data.title);},error: function (xhr, status, error) {// 请求失败时的处理console.error("请求失败:", status, error);}});});});</script>
</body>
</html>

在这个例子中,我们引入了 jQuery 库,并使用 ajax() 方法发起了一个 GET 请求。当按钮被点击时,请求会发送到指定的 URL,成功时将返回的数据显示在页面上。

发送 POST 请求

ajax() 方法不仅支持 GET 请求,还可以发送其他类型的请求,比如 POST。下面是一个发送 POST 请求的例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery ajax() 方法发送 POST 请求</title><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body><button id="sendDataButton">发送数据</button><script>// 等待文档加载完成$(document).ready(function () {// 监听按钮点击事件$("#sendDataButton").click(function () {// 构建要发送的数据对象var dataToSend = {title: "foo",body: "bar",userId: 1};// 使用 ajax() 方法发起 POST 请求$.ajax({url: "https://jsonplaceholder.typicode.com/posts",method: "POST",data: JSON.stringify(dataToSend),contentType: "application/json", // 设置请求头success: function () {// 请求成功时的处理console.log("数据发送成功!");},error: function (xhr, status, error) {// 请求失败时的处理console.error("数据发送失败:", status, error);}});});});</script>
</body>
</html>

在这个例子中,我们定义了一个 JavaScript 对象 dataToSend,并使用 ajax() 方法发送了一个 POST 请求。我们通过 data 选项将数据对象转换为 JSON 字符串,并设置了 contentType"application/json",确保服务器正确解析请求体。

处理 JSONP 请求

有时候,由于同源策略,我们无法直接发送跨域请求。这时,我们可以使用 JSONP(JSON with Padding)来绕过这个限制。以下是一个使用 JSONP 的例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery ajax() 方法处理 JSONP 请求</title><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body><button id="getJsonpDataButton">获取 JSONP 数据</button><div id="jsonpDataContainer"></div><script>// 等待文档加载完成$(document).ready(function () {// 监听按钮点击事件$("#getJsonpDataButton").click(function () {// 使用 ajax() 方法发起 JSONP 请求$.ajax({url: "https://api.themoviedb.org/3/movie/550",method: "GET",dataType: "jsonp", // 指定数据类型为 JSONPdata: {api_key: "YOUR_API_KEY"},success: function (data) {// 请求成功时的处理$("#jsonpDataContainer").text(data.title);},error: function (xhr, status, error) {// 请求失败时的处理console.error("请求失败:", status, error);}});});});</script>
</body>
</html>

在这个例子中,我们通过设置 dataType: "jsonp" 来告诉 jQuery 发起一个 JSONP 请求。这允许我们跨域获取数据。需要注意的是,JSONP 请求不支持 POST 方法,仅支持 GET 方法。

Ajax 事件

ajax() 方法还提供了一系列的事件,使我们能够在请求的不同阶段执行自定义的操作。以下是一些常用的 Ajax 事件:

  • beforeSend:在发送请求之前执行的函数。
  • success:在请求成功完成时执行的函数。
  • error:在请求失败时执行的函数。
  • complete:在请求完成时(不论成功或失败)执行的函数。

下面是一个使用 beforeSendcomplete 事件的例子:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery ajax() 方法的事件</title><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body><button id="getDataButton">获取数据</button><div id="dataContainer"></div><script>// 等待文档加载完成$(document).ready(function () {// 监听按钮点击事件$("#getDataButton").click(function () {// 使用 ajax() 方法发起 GET 请求$.ajax({url: "https://jsonplaceholder.typicode.com/posts/1",method: "GET",beforeSend: function () {// 请求发送前的操作console.log("请求即将发送...");},success: function (data) {// 请求成功时的处理$("#dataContainer").text(data.title);},error: function (xhr, status, error) {// 请求失败时的处理console.error("请求失败:", status, error);},complete: function () {// 请求完成时的操作console.log("请求已完成。");}});});});</script>
</body>
</html>

在这个例子中,我们使用了 beforeSendcomplete 事件来执行在请求开始和结束时的操作。这些事件可以为我们提供更灵活的控制,以满足特定的需求。

全局设置

如果你希望为所有的 Ajax 请求设置一些默认的配置,可以使用 $.ajaxSetup() 方法。这个方法接受一个对象,其中包含了默认的设置。这些设置将应用于所有使用 ajax() 方法的请求。以下是一个示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery ajaxSetup() 方法</title><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body><button id="getDataButton">获取数据</button><div id="dataContainer"></div><script>// 设置全局默认配置$.ajaxSetup({beforeSend: function () {console.log("全局设置:请求即将发送...");},complete: function () {console.log("全局设置:请求已完成。");}});// 等待文档加载完成$(document).ready(function () {// 监听按钮点击事件$("#getDataButton").click(function () {// 使用 ajax() 方法发起 GET 请求$.ajax({url: "https://jsonplaceholder.typicode.com/posts/1",method: "GET",success: function (data) {// 请求成功时的处理$("#dataContainer").text(data.title);},error: function (xhr, status, error) {// 请求失败时的处理console.error("请求失败:", status, error);}});});});</script>
</body>
</html>

在这个例子中,我们使用 $.ajaxSetup() 方法设置了 beforeSendcomplete 事件的默认行为。这样,所有使用 ajax() 方法的请求都会继承这些全局设置。

结语

通过本文的介绍,你应该对 jQuery 中的 ajax() 方法有了更深入的了解。这个方法提供了许多选项和事件,使我们能够轻松地处理各种异步请求的场景。同时,全局设置的使用能够进一步简化代码,提高可维护性。希望这篇博客能够帮助你更加熟练地使用 jQuery 进行前端开发,愿你的代码更加优雅、高效!

作者信息

作者 : 繁依Fanyi
CSDN: https://techfanyi.blog.csdn.net
掘金:https://juejin.cn/user/4154386571867191

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/152055.shtml

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

相关文章

利用AlphaMissense准确预测蛋白质组范围内的错义变体效应

Editor’s summary 蛋白质中单个氨基酸的变化有时影响不大&#xff0c;但通常会导致蛋白质折叠、活性或稳定性方面的问题。只有一小部分变体进行了实验研究&#xff0c;但有大量的生物序列数据适合用作机器学习方法的训练数据。程等人开发了AlphaMissense&#xff0c;这是一种…

浅析ChatGPT中涉及到的几种技术点

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

航测三维实景:创造更加真实和精细的虚拟环境

航测三维实景&#xff1a;创造更加真实和精细的虚拟环境 航测三维实景技术是一项以航空摄影测量为基础&#xff0c;结合计算机图像处理和显示技术的高精度三维实景重建方法。它以其独特的视角和真实感十足的体验&#xff0c;已经广泛应用于城市规划、土地资源管理、自然资源调查…

大数据时代,怎样通过日志分析保护我们的数据!

在今天的大数据时代&#xff0c;大量的数据被生成和存储。对于IT行业来说&#xff0c;日志文件是宝贵的信息财富。 通过合理的日志分析和解读&#xff0c;可以帮助企业提高运维效率、加强安全防护、改进产品质量和优化用户体验&#xff0c;本文将深入探讨日志分析在IT中的重要性…

基于R语言平台Biomod2模型的物种分布建模与可视化分析

!](https://img-blog.csdnimg.cn/84e1cc8c7f9b4b6ab60903ffa17d82f0.jpeg#pic_center)

设计模式-状态模式-笔记

状态模式State 在组件构建过程中&#xff0c;某些对象的状态经常面临变化&#xff0c;如何对这些变化进行有效的管理&#xff1f;同时又维持高层模块的稳定&#xff1f;“状态变化”模式为这一问题提供了一种解决方案。 经典模式&#xff1a;State、Memento 动机&#xff08…

【飞控调试】DJIF450机架+Pixhawk6c mini+v1.13.3固件+好盈Platinium 40A电调无人机调试

1 背景 由于使用了一种新的航电设备组合&#xff0c;在调试无人机起飞的时候遇到了之前没有遇到的问题。之前用的飞控&#xff08;Pixhawk 6c&#xff09;和电调&#xff08;Hobbywing X-Rotor 40A&#xff09;&#xff0c;在QGC里按默认参数配置来基本就能平稳飞行&#xff0…

SpringBoot——日志及原理

优质博文&#xff1a;IT-BLOG-CN 一、SpringBoot日志 选用 SLF4j&#xff08;接口&#xff09;和 logback&#xff08;实现类&#xff09;&#xff0c;除了上述日志框架&#xff0c;市场上还存在 JUL(java.util.logging)、JCL(Apache Commons Logging)、Log4j、Log4j2、SLF4j…

2024中国人民大学计算机考研分析

24计算机考研|上岸指南 中国人民大学 中国人民大学计算机考研招生学院是信息学院。目前均已出拟录取名单。 中国人民大学在1978年创立了经济信息管理系&#xff0c;它是国内最早建立的将数学与信息技术在经济管理领域应用为特色的系科。1986年&#xff0c;在原系计算站的基础…

js-WebApi笔记之BOM

目录 window对象 定时器-延迟函数 location对象 navigator对象 histroy对象 本地存储 localStorage sessionStorage localStorage 存储复杂数据类型 window对象 BOM (Browser Object Model ) 是浏览器对象模型 window对象是一个全局对象&#xff0c;也可以说是JavaScr…

基于ResNet框架的CNN

数据准备 DATA_URL http://download.tensorflow.org/example_images/flower_photos.tgz 一、训练集和验证集的划分 #spile_data.pyimport os from shutil import copy import randomdef mkfile(file):if not os.path.exists(file):os.makedirs(file)file flower_data/flower…

11.20 知识总结(choices参数、MVC和MTV的模式、Django与Ajax技术)

一、 choices参数的使用 1.1 作用 针对某个可以列举完全的可能性字段&#xff0c;我们应该如何存储 .只要某个字段的可能性是可以列举完全的&#xff0c;那么一般情况下都会采用choices参数 1.2 应用场景 应用场景&#xff1a; 学历&#xff1a; 小学 初中 高中 本科 硕士…

第八部分:JSP

目录 JSP概述 8.1&#xff1a;什么是JSP&#xff0c;它有什么作用&#xff1f; 8.2&#xff1a;JSP的本质是什么&#xff1f; 8.3&#xff1a;JSP的三种语法 8.3.1&#xff1a;jsp头部的page指令 8.3.2&#xff1a;jsp中的常用脚本 ①声明脚本&#xff08;极少使用&#xf…

打不开github网页解决方法

问题&#xff1a; 1、composer更新包总是失败 2、github打不开&#xff0c;访问不了 解决方法&#xff1a;下载一个Watt Toolkit工具&#xff0c;勾选上&#xff0c;一键加速就可以打开了。 下载步骤&#xff1a; 1、打开网址&#xff1a; Watt Toolkit 2、点击【下载wind…

k8s的高可用集群搭建,详细过程实战版

kubernetes高可用集群的搭建 前面介绍过了k8s单master节点的安装部署 今天介绍一下k8s高可用集群搭建 环境准备&#xff1a; vip &#xff1a;192.168.121.99 keeplive master01&#xff1a;192.168.121.153 centos7 master02&#xff1a;192.168.121.154 centos7 master03&a…

jupyter修改默认打开目录

当我们打开jupyter notebook&#xff08;不管用什么样的方式打开&#xff0c;使用菜单打开或者是命令行打开是一样的&#xff09;会在默认的浏览器中看到这样的界面、 但是每一台不同的电脑打开之后的界面是不同的&#xff0c;仔细观察就会发现&#xff0c;这里面现实的一些文件…

基于Vue+SpringBoot的超市账单管理系统 开源项目

项目编号&#xff1a; S 032 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S032&#xff0c;文末获取源码。} 项目编号&#xff1a;S032&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统设计3.1 总体设计3.2 前端设计3…

【自动化测试】基于Selenium + Python的web自动化框架!

一、什么是Selenium&#xff1f; Selenium是一个基于浏览器的自动化工具&#xff0c;她提供了一种跨平台、跨浏览器的端到端的web自动化解决方案。Selenium主要包括三部分&#xff1a;Selenium IDE、Selenium WebDriver 和Selenium Grid&#xff1a;  1、Selenium IDE&…

10_6 input输入子系统,流程解析

简单分层 应用层 内核层 --------------------------- input handler 数据处理层 driver/input/evdev.c1.和用户空间交互,实现fops2.不知道数据怎么得到的,但是可以把数据上传给用户--------------------------- input core层1.维护上面和下面的两个链表2.为上下两层提供接口--…

【面试经典150 | 数学】回文数

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;反转一半数字 其他语言python3 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本…