Jquery+AJax方法详解，绝对最简单易懂

最新推荐文章于 2024-05-16 02:23:50 发布

Rapper_cl

最新推荐文章于 2024-05-16 02:23:50 发布

阅读量2.9k

点赞数 1

分类专栏： jQuery Ajax 文章标签： Jquer load方法 Load()方法详解

本文链接：https://blog.csdn.net/m0_37510446/article/details/90291394

版权

jQuery 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Ajax

9 篇文章 0 订阅

订阅专栏

一，简单介绍一下两位主角
Jquery：属于JavaScript的一个库而已，提供了很多快捷的方法，大大简化了JavaScript的编程
Ajax：属于异步的JavaScript和XML，所谓异步的最直接体现就是，可以在不加载整个页面的情况下，只更新网页中的部分内容，用起来方便快捷，就好比，你车坏了，不需要换整个车，只需要换个零件即可。
最常用场景就是用户名校验
二，Jquery提供与Ajax有关的方法
1，Jquery load（）方法：
首先来看一下该方法长啥样： $(selector).load(URL,data,callback);
其中：
URL为必须的，因为你要与服务器进行交互，就必须要给出对应地址，否则无法完成操作
data为可选，该主要用来发送查询字符并且是以键值对的形式
callback同样也是可选，主要是对该load（）执行完成之后，所做的操作，可以理解为马后炮，接下来给大家会有实例讲解，

实例1，在load方法中，只配置必须元素URL（将对应文件中的数据内容加载到对应元素标签中)

<!DOCTYPE　html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
	//通过点击button来触发该方法
$("button").click(function() {
	//该load方法，加载对应的数据内容到该元素中
$("#cc").load("https://www.runoob.com/try/ajax/demo_test.txt")});
});
</script>
<body>
<div id="cc"><h3>接下来使用Jquery+Ajax来实现load方法</h3></div>
<button  type="button">点击我，触发Jquery+Ajax的load方法</button>
</body>
</html>

同时也可以将Jquery的选择器添加到URL参数中，对该URL中对应的文件进行选取操作，从而可以达到在对应文件中选取我们想要的内容

<!DOCTYPE　html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
	//通过点击button来触发该方法
$("button").click(function() {
	//该load方法，加载对应的数据内容到该元素中
$("#cc").load("https://www.runoob.com/try/ajax/demo_test.txt #p1")});
});
$(function(){
	//通过点击button来触发该方法
$("button").click(function() {
	//该load方法，加载对应的数据内容到该元素中
$("#ss").load("https://www.runoob.com/try/ajax/demo_test.txt h2")});
});
</script>
<body>
<div id="cc"><h3>通过p1id标签加载URL文件中的h2内容</h3></div>
<div id="ss"><h3>通过h2元素标签加载URL文件中的h2内容</h3></div>
<button  type="button">点击我，触发Jquery+Ajax的load方法</button>
<p><a href="https://www.runoob.com/try/ajax/demo_test.txt" target="_blank" >点击我显示该文件内容</a></p>
</body>
</html>

接下来就说说callback这个参数作用：
该callback参数中包含该load（）方法执行过程中的各种信息：
responseTxt—代表响应的结果（也就是方法调用成功的结果)
statusTxt–显而易见，代表整个调用过程的状态（与Ajax的readyStatus参数类似，用来做判断)
xhr—代表XMLHttpRequest对象，简称XHR
此时来看看下面的例子，一会儿就会大彻大悟了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
  //添加callback方法参数，（responseTxt,statusTxt,xhr）
 $("#div1").load("https://www.runoob.com/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
 //判断该方法是否调用成功，若成功则使用xhr对象输出对应的响应内容和状态
 if(statusTxt=="success")
 alert("load方法加载数据成功"+xhr.responseText+xhr.status+":"+xhr.statusText);
 //若加载失败
 if(statusTxt=="error")
 alert("load方法加载数据失败"+xhr.status+":"+xhr.statusText);
 });
  });
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
<button>获取load加载的内容内容</button>
</body>
</html>

所以大家现在对于这个callback中的三个参数理解了，接着来完善一下：
responseTxt—代表响应的结果（也就是方法调用成功的结果)，
statusTxt–显而易见，代表整个调用过程的状态（与Ajax的readyStatus参数类似，这个是使用success和error做判断)
xhr—代表XMLHttpRequest对象，简称XHR，用该对象来输出对应的statusText和responseText信息

最后一点，注意，使用xhr对象输出响应内容或状态时，结尾为Text

三，使用场景：
为了避免多页面中的代码重复，我们可以利用load方法，将重复部分（例如导航栏等）放入单独的文件，使用的时候，在利用load方法将其加载过来即可，很方便

Rapper_cl

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Jquery+AJax方法详解，绝对最简单易懂

一，简单介绍一下两位主角Jquery：属于JavaScript的一个库而已，提供了很多快捷的方法，大大简化了JavaScript的编程Ajax：属于异步的JavaScript和XML，所谓异步的最直接体现就是，可以在不加载整个页面的情况下，只更新网页中的部分内容，用起来方便快捷，就好比，你车坏了，不需要换整个车，只需要换个零件即可。二，Jquery提供与Ajax有关的方法1，Jquery ...
复制链接

扫一扫

专栏目录