1.$.ajax()返回其创建的 XMLHttpRequest 对象。
$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。
如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。
一.原始的方法
<scripttype="text/JavaScript">
function load(){
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera,Safari
xmlhttp= newXMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp= newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange= function(){
if (xmlhttp.readyState ==4 && xmlhttp.status == 200) {//获得了请求数据
var expertinfolist = xmlhttp.responseText;
//发送请求数据到myDiv document.getElementById("myDiv").innerHTML=expertinfolist;
}
}
var url="expert_ZFTservlet?expert_name="+"曾攀";
xmlhttp.open("GET", url,true);
xmlhttp.send();
}
</script>
二.利用jquery包的ajax请求
在使用该方法前需要引入Jquery包
<scriptsrc="js/jquery-2.1.min.js"type="text/javascript"></script>
<script>
$.ajax({
type:'post',//方法类型
url:" expert_ZFTservlet?expert_name="+"曾攀",//请求地址
dataType:'json',//数据类型
data:{page:page},//请求到接口的对象
success:callback//请求成功处理函数
});
//返回函数
function callback(data){
alert(data); //获得请求返回对象;
}
</script>
例:
$.ajax({
$.ajax({
url:"http://wechat.ixunluo.com/weishopcs/app/index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=taobaoke",
type:"post",
data:{page:page},//传送到接口的对象
success:function(res){
var list = eval(res);
//console.log(list.length);
//var list=JSON.parse(res);
if(list.length>0) {
hasMore=true;
//console.log(JSON.parse(res));
//追加数据
for(var i=0;i<list.length;i++) {
html+="<a href='./index.php?i=3&c=entry&m=ewei_shopv2&do=mobile&r=taobaoke.detail&id="+list[i].id+"'>";
html+="<div class='list_flex_son'>";
html+="<img data-original='"+res[i]+"' class='list_flex_son_img' src='"+list[i].thumb+"' style='height: 175.313px;'>";
html+="<div class='list_flex_son_title'>"+list[i].title+"</div>";
html+="<div class='list_flex_son_row'>";
html+="<span class='sfsr_price'>¥"+list[i].marketprice+"</span>";
html+="<span class='sfsr_tbprice'>淘宝价:"+list[i].productprice+"元</span>";
html+="</div>";
html+="</div>";
html+="</a>";
}
$listrow.append(html);
var imgWidth=$('.list_flex_son_img').width();
$('.list_flex_son_img').height(imgWidth);
}
}
})
三.通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
实例:
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
四. 通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
实例:
$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames }, function (data) {
if (data == "ok") {
alert("添加成功!");
}
})
五.通过 HTTP GET 请求载入 JSON 数据。
实例:
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
------------------------------------------------------------------------------------------封------------------------------------------------------------------------------------------------------------------------------------
解析返回的json数据方法有:
1.data=JSON.parse(data);
2.data=eval(data)
jQuery Ajax 操作函数
jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。
函数 | 描述 |
---|---|
jQuery.ajax() | 执行异步 HTTP (Ajax) 请求。 |
.ajaxComplete() | 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
.ajaxError() | 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。 |
.ajaxSend() | 在 Ajax 请求发送之前显示一条消息。 |
jQuery.ajaxSetup() | 设置将来的 Ajax 请求的默认值。 |
.ajaxStart() | 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。 |
.ajaxStop() | 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
.ajaxSuccess() | 当 Ajax 请求成功完成时显示一条消息。 |
jQuery.get() | 使用 HTTP GET 请求从服务器加载数据。 |
jQuery.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码数据。 |
jQuery.getScript() | 使用 HTTP GET 请求从服务器加载 JavaScript 文件,然后执行该文件。 |
.load() | 从服务器加载数据,然后把返回到 HTML 放入匹配元素。 |
jQuery.param() | 创建数组或对象的序列化表示,适合在 URL 查询字符串或 Ajax 请求中使用。 |
jQuery.post() | 使用 HTTP POST 请求从服务器加载数据。 |
.serialize() | 将表单内容序列化为字符串。 |
.serializeArray() | 序列化表单元素,返回 JSON 数据结构数据。 |