设为首页 加入收藏

TOP

jQuery中Ajax使用
2014-11-24 12:37:44 来源: 作者: 【 】 浏览:0
Tags:jQuery Ajax 使用

1.load方法 载入远程HTML代码并插入DOM中



说明:
load(url [, data] [, callback])
url String 请求HTML页面的URL地址
data Object 发送至服务器的key/value数据
callback Function 请求完成时的回调函数,无论请求成功或失败



实例:
$("#resText").load("test.html");
$("#resText").load("test.html .para");筛选class为para的内容
$("#resText").load("test.html",function(){});GET
$("#resText").load("test.html",{name:"rain", age:"22"},function(){});POST
$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){});回调参数
responseText,请求返回的内容
textStatus,请求状态:success,error,notmodified,timeout
XMLHttpRequest



2.$.get()方法



说明:
$.get(url [, data] [, callback] [, type])
url,data同load方法
callback 载入成功时回调函数(Response返回状态success)
type String 服务器端返回内容的格式,包括xml,html,script,json,text和_default



实例:
$.get("", {:,:}, function(data, textStatus){})
data返回内容
textStatus请求状态



数据格式:
HTML
$("#resText").html(data);
XML attr() find() filter()等
var username = $(data).find("comment").attr("username");
var content = $(data).find("comment content").text();
var txtHtml = "..." + username + "...";
$("#resText").html(txtHtml);
服务器端header("Content-Type:text/xml; charset=utf-8");
JSON
var username = data.username;
var content = data.content;
var txtHtml = "..." + username + "...";
$("#resText").html(txtHtml);



3.$.post()方法



GET和POST区别:
GET参数跟在URL后,POST最为HTTP消息实体内容
GET数据大小限制2KB,POST理论上不受限制
GET请求数据被浏览器缓存,存在安全性问题
服务器端获取方式也不同



$.post("", [
username:$("#username").val(),
content:$("#content").val()
]), function(data,textStatus) {
$("#resText").append(data);
});



4.$.getScript()方法



$(function(){
$.getScript("",function(){})
});



5.$.getJSON方法



$.getJSON("", function(date){
$("#resText").empty;
var html = '';
$.each(data, function(commentIndex,comment){
html += "..." + comment['username'] + "...";
});
$("#resText").html(html);
});



6.$.ajax(options)方法,jQuery最底层的Ajax实现



参数:
url
type POST/GET(默认)
timeout Number
data Object/String
dataType String xml,html,script,json.jsonp.text
beforeSend Function function(XMLHttpRequest){this} this调用本次Ajax请求时传递的options参数
complete Function function(XMLHttpRequest,textStatus){this}成功或失败均调用
success Function function(data,textStatus){}成功回调函数
error Function function(XMLHttpRequest,textStatus,errorThrown){}
global Boolean 默认true,表示是否触发全局Ajax事件



7.serialize()方法,将DOM元素序列化为字符串



$.get("", $("#form1").serialize(), function(){});
$(":checkbox, :radio").serialize();



8.serializeArray()方法,返回JSON格式的数据



$(":checkbox, :radio").serializeArray();



9.$.param方法,对一个数组或对象按照key/value进行序列化



var obj = {a:1, b:2, c:3};
var k = $.param(obj);
alert(k);//输出a=1&b=2&c=3



10.Ajax全局事件



ajaxStart(callback)
ajaxStop(callback)
ajaxComplete(callback)
ajaxError(callback)
ajaxSend(callback)请求发送时
ajaxSuccess(callback)



$("#loading").ajaxStart(function(){
$this.show();
});
$("#loading").ajaxStop(function(){
$this.hide();
});


】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇从 C/C++ 程序调用 Java 代码 下一篇jQuery调用struts2,返回script/te..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

·工业机器人TCP校准中 (2025-12-25 05:19:17)
·opc 通讯协议与 TCP (2025-12-25 05:19:15)
·labview中tcp/ip通信 (2025-12-25 05:19:13)
·新书介绍《Python数 (2025-12-25 04:49:47)
·怎么利用 Python 进 (2025-12-25 04:49:45)