jQuery中的Ajax

Adinsclay 2022-05-11 原文

安装Web环境

Ajax方法需要与Web服务器端进行交互，需要有环境才可正常使用，安装环境的工具包有很多，可以选择自行下载。

jQuery中的Ajax

在jQuery中，$.ajax()方法属于最底层的方法，第2层是load()，$.get()，和$.post()，第3层是$.getScript()和$.getJSON()方法。

一、 load( ) 方法

结构

load( url , [data] , [callback] )

捕获.PNG

1.1 应用

1.1.1首先构建一个被load（）方法加载并追加到HTML文件，名字为xi.html，html代码如下：

1 <ul>
2     <li>《慢慢来，一切都来得及》</li>
3     <li>《你的孤独虽败犹荣》</li>
4     <li>《你只是看上去很努力》</li>
5     <li>《JavaScript从入门到放弃》</li>
6 </ul>
7 <div>你筛选出来的元素</div>

1.1.2然后再新建一个空白页面，用来追加的HTML内容，HTML代码如下：

1 <h3>你最喜欢读什么书？</h3>
2 <p id="cont"></p>
3 <button>点击</button>

1.1.3接下来就是编写Jquery代码了，等DOM加载完毕之后，通过单击按钮来调用load（）方法，然后将xi.html的内容加载到id=“cont”的元素里。
jQuery代码如下：

1 $("button").click(function(){
2     $("#cont").load("xi.html")//单击时将xi.html的内容加载到页面上
3     })
4 })

运行结果：

1.2筛选载入的HTML文档

上面的例子是将xi.html页面中的内容都加载到id为“cont”的元素里，如果只要加载页面内的某些内容，可以使用load（URL selector）方法的URL参数来达到目的。

注意：URL和选择器之间有一个空格。

例如只需要加载xi.html的li元素中内容，可以使用如下代码：

1 $("button").click(function(){
2     $("#cont").load("xi.html li");
3 }

运行结果：

1.3传递方式

load（）方法传递方式根据参数data来自动指定。如果没有参数传递，则采用get方式，反之，则自动转换为post方式。

1 $("button").click(function(){
2     $("#cont").load("xi.html li"，{name:"rain"，age"18"}，function（）{
3    //code....
4   });
5 })

1.4 回调参数

对于必须在加载完成后才能继续的操作，load（）方法提供了回调函数（callback），该函数有3个参数，分别代表“请求返回的内容”，“请求状态”，“XMLHttpRequest对象”，代码如下：

1 $("#cont").load("xi.html li"，function（responseText，textStates，XMLHttpRequest）{
2    //responseText：请求返回的内容
3    //textStates：请求状态：success   error  notmodified  timeout4种
4    //XMLHttpRequest：XMLHttpRequest对象
5   });
6 ————————————————
7 版权声明：本文为CSDN博主「孙玉凯」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
8 原文链接：https://blog.csdn.net/sunshao904/article/details/106440985