jQuery AJAX 方法

1.简介

①什么是AJAX ?

AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。

②为什么用jQuery的AJAX方法?

编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们封装好了ajax,省去不少麻烦,我们只需要一行简单的代码,就可以实现 AJAX 功能。

③jQuery的AJAX方法有哪些?

jQuery对AJAX操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法, 第2层是load()、$.get()、$.post()方法,第3层是$.getScript()和$.getJSON()方法。其中第2层方法使用频率最高。

2.load()方法

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

语法格式:

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

这是服务器文件("demo_test.txt")的内容:

<h2>jQuery AJAX 是个非常棒的功能!</h2>

<p id="p1">这是段落的一些文本。</p>

实例:

$("button").click(function(){  
$("#div1").load("demo_test.txt",  
{  
name : "li",  
age : "22"  
},  
function(responseTxt,statusTxt,xhr){  
if(statusTxt=="success")  
alert("外部内容加载成功!");  
if(statusTxt=="error")  
alert("Error: "+xhr.status+": "+xhr.statusText);  
});  
});  

3.$.get()方法

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

语法格式:

$.get( URL [,data] [,callback] [,type] );

注:$.get()方法是jQuery的全局函数,对象是jQuery;而不是$("selector"),jQuery对象。

实例:

$("button").click(function(){  
$.get("/try/ajax/demo_test_post.php",  
{  
name:"菜鸟教程",  
url:"http://www.runoob.com"  
},  
function(data,status){  
alert("数据: \n" + data + "\n状态: " + status);  
} , "json" );  
});  

4. $.post()方法

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

语法格式:

$.post( URL [,data] [,callback] [,type] ); //语法与$.get()相同

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容