jQuery之ajax學習總結

     項目開始了幾天了，項目中我用到了自學了的jQuery，但是對jQuery的ajax方法不太熟，因為它是基於Httprequest實現的，也覺得外掛程式AjaxPro能更好的實現ajax非同步呼叫，ajaxPro調用ajax可以直接傳datatable、ilist等對象，能夠方便的實現功能。

 

     不過昨天下午發現了問題，IE裡，當jQuery、AjaxPro同時使用時，出現了BUG，只要註冊了AjaxPro的頁面，jQuery的事件就會報錯，我測試了很多次，問題是出現在AjaxPro的core.ashx檔案裡，網上找了很多資料沒有什麼結果，但經過了我的測試我斷定這是BUG，他們內部的js起了衝突。

 

     這是core.ashx檔案裡js錯誤，報出的錯誤為“無法得到 type 屬性。參數無效” 或者 “對象不支援此操作”

    

     但是在Firefox裡，運行沒問題，但會也有點小問題，按鈕觸發ajax事件，觸發完了，按鈕就變成文字框了。

 

     沒辦法，jQuery裡不能用事件，讓我覺得很鬱悶，今天我項目沒怎麼做，專門去學學jQuery裡的ajax，一般的調用我還懂，比如dataType為xml、html的還能馬馬虎虎，今天看了點資料，找到了好東西，其實jQuery調用集合有個很好的辦法--json，開始我也試過這樣的測試，但是由於時間原因一直沒通過，呵呵，今天晚上呆公司好好找了找，不錯，先記下。。。下面是部分代碼：

$("div").load()方式：

Code
$("div").load("login.html"); //載入其他檔案內容到div上，適合做模式登入

 

$.get()方式：

Code
$.get('test.aspx', {index:4}, function (data) { 
     $("#result").html(data); 
}); 

 

$.post()方式：

Code
$.post('test.aspx', {index:4}, function (data){
    $("#result").html(data); 
}); 

 

$.post()方式：(擷取json)

 

Code
ajax.ashx.cs檔案:

Response.ContentType = "application/json";
Response.Write("{name:'lidi',age:20}");

調用
$.post("ajax.ashx",{},function(data){
    alert(data.name);
},"post");  //注意這裡

 

$.ajax()方式：（dataType：xml）

Code
$.ajax({
    type:"get",
    dataType:"xml",
    url:"http://www.cnblogs.com/rss",  //返回xml格式資訊
    beforeSend:function(xmlhttprequest){
        $("img").show();
    },
    success:function(data,status){
        $("div").html("");
        $("item",data).each(function(i, domEle){
            $("div").append("<li>"+$(domEle).children("title").text()+"</li>");
        });
    },
    complete:function(){
        $("img").hide();
    },
    error:function(xmlhttprequest,error){
        alert(error);
    }
});

 

 

$.ajax()方式：（dataType：html）

 

Code
        $.ajax({
           type:"post",
           url:"test.aspx",  //返回xml格式字串，如:<ul><li>aa</li><li>bb</li></ul>
           data:"index=3&name="+$("#name").val()+"&age="+$("#age").val()+"&sex="+$("input:radio:checked").val(),
           dataType:"html",
           timeout:50000,
           beforeSend:function(xmlhttprequest){
               $("div").html("<img id='imgid' src='http://www.cnblogs.com/imges/loading.gif' />");
           },
           success:function(xml,status){
               $(xml).each(function(){
                   $(this).children().each(function(){
                       $("<li></li>").html($(this).text()).appendTo("div");
                   });
               });
           },
           error:function(xmlhttprequest,error){
               alert(error);
           },
           complete:function(){
               $("#imgid").hide();
           }
        });

 

$.ajax()方式：（dataType：script）

 

Code
$.ajax({
    type: "post",      
    url: "ajax.aspx",  //返回格式如："var a = {name:'lidi',age:20};"    
    data: "index=5",      
    dataType: "script",
    success:function(){
        alert(a.name);
    }
});

 

$.ajax()方式：（dataType：json）

 

Code
$.ajax({
    type: "post",      
    url: "ajax.aspx",  //返回格式如："{name:'lidi',age:20}"    
    data: "index=5",      
    dataType: "json",
    success:function(data){
        alert(data.name);
    }
});

 

嘿嘿，現在開發就可以完全用我自學的jQuery了。真不錯！