jQuery开发之Ajax

页面导航:首页 > 网络编程 > JavaScript > jQuery开发之Ajax

jQuery开发之Ajax

来源: 作者: 时间:2016-02-02 09:58 【

1,load()方法 (1)load()方法是jQuery中最常用和最简单的Ajax方法,能载入远程HTML代码,并插入代码中。它的结构为:load(url [,data] [,callback])load()方法解释如下表所示示例代码如下:

1,load()方法
(1)load()方法是jQuery中最常用和最简单的Ajax方法,能载入远程HTML代码,并插入代码中。它的结构为:

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

load()方法解释如下表所示

这里写图片描述

示例代码如下:<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> <script type ="text/javascript" src ="jquery.js" ></script> <script type ="text/javascript"> $(document).ready(function(){ $("#send").click(function(){ $("#resText").load("test.html"); }); }); </script>

张三:

沙发

李四:

板凳

王五:

地板

已有评论:
 

运行效果:
没有单击按钮的时候
这里写图片描述
单击按钮后
这里写图片描述

(2) 筛选载入的html文档
核心代码如下:

$("resText").load("test.html .para")

运行效果如下:
这里写图片描述

(3)传递方式
load()方法的传递方式根据data来自动指定,如果没有参数传递,则采用 GET方式传递,反之,则采用POST方式。示例代码如下:

无参数传递是get方法
$("resText").load("test.php",function(){

})


$("resText").load("test.php",{name:"rain",age:"22"},function(){

})

(4) 回调参数
对于必须在加载完成后再能进行的操作,load()方法提供了回调函数(callback),该函数有三个参数分别代表请求返回的内容,请求状态和XMLHttpRequest对象,jQuery代码如下:

$("resText").load("test.php",function(responseText,textStatus,XMLHttpRequest){
//responseText    返回的内容
//textStatus    请求状态  success, error, notmodified,timeout
//XMLHttpRequest对象
})

2,$.get()方法和$.post()方法
$.get()方法使用GET方法进行异步请求。
它的结构为:

$.get(url [,data] [,callback] [,type])

参数解释如下:
这里写图片描述

$.post() 方法示例代码如下:
这里写图片描述

3,$.getScript()方法 和$.getJson()方法
(1), 有时候,在页面初次加载时取得所需的全部javaScript()文件是完全没有必要的。虽然可以在需要哪个 JavaScript的时候,动态的创建 <script> 标签,jQuery代码如下:

$(document.createElement("script")).attr("src","test.js").appendTo("head");

或者

$("<script type ='text/javaScript' src ='test.js'/>").appendTo("head");

$.getScript() 更加的简单

$.getScript("test.js")

(2) $.getJson()方法
jQuery示例代码如下:
这里写图片描述

这里写图片描述

(4) $.ajax()方法

$.ajax() 方法是jQuery中Ajax的最底层实现。结构为:

$.ajax(options)

参数说明如下:
这里写图片描述

这里写图片描述
示例代码如下:

$(function(){
$("send").click(function(){
$.ajax({
type:"GET",
url:"test.js",
dataType:"script"
});
});
})

jQuery中Ajax全局事件还有其他几种,如下:
这里写图片描述
注意:
这里写图片描述

</script>

Tags:

相关文章

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<