安装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

 

 

版权声明:本文为Adinsclay原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/nim02/p/16259207.html