jQuery 第十章（jQuery AJAX以及jQuery和其他框架兼容）

news/2024/11/24 13:07:32/

文章目录

  • 前言
  • 什么是 AJAX？
  • jQuery - AJAX load() 方法
    • jQuery load() 方法
  • jQuery - AJAX get() 和 post() 方法
    • HTTP 请求：GET vs. POST
    • jQuery $.get() 方法
    • jQuery $.post() 方法
  • jQuery 与其他框架兼容
    • jQuery 和其他 JavaScript 框架
    • jQuery noConflict() 方法
  • 后言

前言

hello world欢迎来到前端的新世界

😜当前文章系列专栏：jQuery
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

什么是 AJAX？

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

jQuery - AJAX load() 方法

jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

这是示例文件（“demo_test.txt”）的内容：

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

下面的例子会把文件 “demo_test.txt” 的内容加载到指定的

元素中： 

$("#div1").load("demo_test.txt");

也可以把 jQuery 选择器添加到 URL 参数。

下面的例子把 “demo_test.txt” 文件中 id=“p1” 的元素的内容，加载到指定的

元素中： 

$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：

$("button").click(function(){$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){if(statusTxt=="success")alert("External content loaded successfully!");if(statusTxt=="error")alert("Error: "+xhr.status+": "+xhr.statusText);});
});

提示：在jQuery的load()方法中，无论AJAX请求是否成功，一旦请求完成（complete）后，回调函数（callback）立即被触发。

jQuery - AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

HTTP 请求：GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

  • GET - 从指定的资源请求数据
  • POST - 向指定的资源提交要处理的数据
    GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

如需学习更多有关 GET 和 POST 以及两方法差异的知识，请阅读我们的 HTTP 方法 - GET 对比 POST。

jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

$("button").click(function(){$.get("demo_test.php",function(data,status){alert("数据: " + data + "\n状态: " + status);});
});

$.get() 的第一个参数是我们希望请求的 URL（“demo_test.php”）。

第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

提示： 这个 PHP 文件 (“demo_test.php”) 类似这样：

 <?phpecho "This is some text from an external PHP file.";?>

jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法:

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

$("button").click(function(){$.post("demo_test_post.html",{name:"Donald Duck",city:"Duckburg"},function(data,status){alert("Data: " + data + "nStatus: " + status);});
});

$.post() 的第一个参数是我们希望请求的 URL (“demo_test_post.php”)。

然后我们连同请求（name 和 city）一起发送数据。

“demo_test_post.php” 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。

第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

提示： 这个 PHP 文件 (“demo_test_post.php”) 类似这样：

<?php$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';$city = isset($_POST['city']) ? htmlspecialchars($_POST['city']) : '';echo 'Dear ' . $name;echo 'Hope you live well in ' . $city;?>

提示：在jQuery中，$.ajax()方法能够实现与load()、$.get()和$.post()方法相同的功能，并且具有更多的作用！

jQuery 与其他框架兼容

如何在页面上同时使用 jQuery 和其他框架？

要解决这个问题，只需要使用jQuery中的noConflict()方法，它允许你在同一个页面加载多个jQuery实例，尤其是不同版本的jQuery。

jQuery 和其他 JavaScript 框架

正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。

如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？

其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。

jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

jQuery noConflict() 方法

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

$.noConflict();
jQuery(document).ready(function(){jQuery("button").click(function(){jQuery("p").text("jQuery is still working!");});
});

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：

var jq = $.noConflict();
jq(document).ready(function(){jq("button").click(function(){jq("p").text("jQuery is still working!");});
});

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 “jQuery”：

$.noConflict();
jQuery(document).ready(function($){$("button").click(function(){$("p").text("jQuery is still working!");});
});

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力


http://www.ppmy.cn/news/1238300.html

相关文章

JWT和Token之间的区别

JWT和Token之间的区别

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a;每天一个知识点 ✨特色专栏&#xff1a…
阅读更多...
闲人闲谈PS之四十七——PS顾问能力评价参考标准

闲人闲谈PS之四十七——PS顾问能力评价参考标准

惯例闲话&#xff1a;逝者如斯夫&#xff0c;一晃2023年进入年尾&#xff0c;初步盘点下今年做的事情&#xff0c;还真不少&#xff0c;PLM项目、接口开发、扫码系统、数字彩虹图、专利申请…闲人发现&#xff0c;不经意间&#xff0c;SAP从自己的主营业务中占据的比重已经越来…
阅读更多...
前缀和——724. 寻找数组的中心下标

前缀和——724. 寻找数组的中心下标

文章目录 &#x1f353;1. 题目&#x1fad2;2. 算法原理&#x1f984;解法一&#xff1a;暴力枚举&#x1f984;解法二&#xff1a;前缀和 &#x1f954;3. 代码实现 &#x1f353;1. 题目 题目链接&#xff1a;724. 寻找数组的中心下标 - 力扣&#xff08;LeetCode&#xff0…
阅读更多...
【Web】NewStarCTF Week1 个人复现

【Web】NewStarCTF Week1 个人复现

目录 ①泄露的秘密 ②Begin of Upload ③Begin of HTTP ④ErrorFlask ⑤Begin of PHP ⑥R!C!E! ⑦EasyLogin ①泄露的秘密 盲猜/robots.txt,访问得到flag前半部分 第二个没试出来&#xff0c;老老实实拿dirsearch扫吧 访问/www.zip 下载附件&#xff0c;拿到第二部分…
阅读更多...
RHCE8 资料整理（八）

RHCE8 资料整理（八）

RHCE8 资料整理 第 8 篇 容器管理第 27 章 使用podman管理容器27.1 安装及配置podman27.2 镜像管理27.2.1 镜像的命名27.2.2 对镜像重新做标签27.2.3 删除镜像27.2.4 查看镜像的层结构27.2.5 导出和导入镜像 27.3 创建容器27.3.1 创建容器27.3.2 容器的生命周期27.3.3 创建临时…
阅读更多...
Docker Remote API 使用详解

Docker Remote API 使用详解

文章目录 1.容器相关1.1 列出所有容器1.2 创建新容器1.3 检查容器1.4 启动容器1.5 停止容器1.6 重启容器1.8 删除容器1.14 根据资源使用情况获取容器统计信息1.16 获取容器日志 2.镜像相关2.1 获取镜像清单2.2 构建镜像2.4 检查镜像2.5 获取镜像的历史记录2.6 标记一个镜像2.8 …
阅读更多...
哈希表的认识与实现

哈希表的认识与实现

哈希的概念 可以不经过任何比较&#xff0c;一次直接从表中得到要搜索的元素。如果构造一种存储结构&#xff0c;通过某种函数(hashFunc)使元素的存储位置与它的关键码之间能够建立一一映射的关系&#xff0c;那么在查找时通过该函数可以很快找到该元素。 所以当我们设置这种…
阅读更多...
面试：线上问题处理

面试：线上问题处理

文章目录 在处理线上问题时&#xff0c;你的排查思路和步骤是什么线上偶发性问题如何处理和跟踪当系统出现大量错误日志时&#xff0c;你会如何分析和解决问题在高并发场景中&#xff0c;如何排查和解决线程安全问题当系统出现大规模的故障时&#xff0c;你的应急处理和恢复策略…
阅读更多...
最新文章

Copyright @ 2022~2023