5种常见ajax请求数据

13 篇文章 0 订阅
3 篇文章 0 订阅

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 数据结构数据。

  • 0
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

昌子玩前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值