首页 > 代码库 > .JQuery中的Ajax
.JQuery中的Ajax
1.load()方法
(1)load()方法是jquery中最为简单和常用的ajax方法,能远程载入html代码并插入DOM中,它的结构为:
load(url[,data] [,callback])
laod()方法的参数解释
参数名称 | 类型 | 说明 |
url | Sting | 请求html页面的URL地址 |
data[可选] | Object | 发至服务器的key/value数据 |
callback[可选] | Function | 请求完成是的回调函数,无论请求成功或失败 |
(2)筛选载入的html文档
load()方法的URL参数的语法结构为:“url selector”,注意:url和选择器之间有空格。
例如:
$("#restext").load("test.html .para");
(3)传递方式
load()方法的传递方式是根据参数data来自动指定。如没有参数传递,则采用GET方法传递,反之,则自动转换为POST方式。
//无参数出传递,则是GET方式
$("#resText").load("test.php",function(responseText,textStatus,XMLHttpRequest){
//回调函数,必须在加载完成才能继续操作
alert(responseText);//请求返回的内容
alert(textStatus);//请求的状态:success,error,notmodified,timeout4种
alert(XMLHttpRequest);//XMLHttpRequest对象
})
//则有参数出传递,则是post方式
$("#resText").load("test.php",{name:"rain",age:"22"},function(responseText,textStatus,XMLHttpRequest){
//回调函数,必须在加载完成才能继续操作
})
2.$.get()方法和$.post()方法
load()方法通常用来从WEB服务器上获取获取静态的数据文件,然而这并不能体现AJAX的全部价值。在项目中,如果需要传递一些参数给服务器的页面,那么可以使用$.get()或者$.post()方法或$.ajax()方法。
(1)$.get()方法是jquery中最为简单和常用的ajax方法,能远程载入html代码并插入DOM中,它的结构为:
$.get(url[,data] [,callback] [,type])
$.get()方法的参数解释
参数名称 | 类型 | 说明 |
url | Sting | 请求html页面的URL地址 |
data[可选] | Object | 发送至服务器的key/value数据会作为JqueryYString附加到请求URL中 |
callback[可选] | Function | 请求成功时回调函数(只有当党Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法 |
type[可选] | String | 服务器端返回的内容格式,包括xml,html,script,json,text和_default |
(2)使用参数
首先,需要确认请求页面的URL地址,代码如下
$("#resText").click(function(){
$.get("get.php" ,{参数},callback)
})
然后,在提交之前,需要获取“姓名”和“内容”的值作为data参数传递给后台。
代码如下
$("#resText").click(function(){
$.get("get.php" ,{
username:$("#username").val();
content:$("#content").val();
},function(data,textStatus){//只有当党Response的返回状态是success才调用该方法
//data //请求返回的内容,可以是xml文档,json文件,html片段等
//textStatus //请求的状态:success,error,notmodified,timeout4种
})
})
.JQuery中的Ajax