jQuery中的Ajax
安装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