將AJAX轉換爲jQuery

如何將以下代碼轉換爲僅使用jQuery庫？將AJAX轉換爲jQuery

<html> 
<head> 
<script> 
function do_it(value) 
{ 
function newXMLHttpRequest() 
{ 
    try{ return new XMLHttpRequest(); }catch(e){} 
    try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){} 
    try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} 
    return null; 
} 

var ajax_request = false; 
ajax_request = newXMLHttpRequest(); 
var url = "test.pl?b64="+value; 
    ajax_request.open("GET",url,1); 
    ajax_request.onreadystatechange = function() 
    { 
     if(ajax_request.readyState == 4) 
     { 

      var response = ajax_request.responseText; 
      document.getElementById("in").innerHTML = response; 

     } 
    } 
    ajax_request.send(null); 
} 
</script> 
</head> 
<body> 

<form> 
<input type="text" name="string" onkeyup="do_it(this.value)"/> 
<input type="submit" name="submit"> 
</form> 
<div style="position:absolute;width:200px;height:200px; background-color:yellow; margin-top:100px;" id="in"></div> 

</body> 
</html>

對不起，我也許應該提到，我實際上沒有使用jQuery任何實踐經驗，我在過程中與現在熟悉自己...

來源

2010-11-22 cyber-guard

看看jquerys load() - 我認爲是你正在尋找：

function do_it(value){ 
    $('#in').load('test.pl', { b64: value }); 
}

編輯：如果你想擁有不同的錯誤和成功處理程序，使用ajax()像發佈其他人一樣 - 但是對於簡單的get-this-and-put-into-that-div-request，load（）是更簡短。

編輯2：您的評論：最好的辦法是以任何方式識別您的輸入字段（給它一個ID，或給同一類應該得到這個事件），然後簡單地做：

$('#mytextfield').keyup(function(){ // with id-selector 
    do_it($(this).val()); 
}); 

$('.textfield').keyup(function(){ // with class-selector 
    // whatever 
});

（未：我沒有帶測試了，只是寫了我的心......如果有問題，只需要看看documentation）

來源

2010-11-22 13:34:01 oezi

謝謝，作品像一個魅力。不能相信一行代替了所有的代碼......另外你會如何去執行jquery中的onkeyup事件？ – 2010-11-22 13:50:58

請看看我的編輯，我希望這可以幫助你。 – oezi 2010-11-22 13:58:50

function getData(service, successFunction, failureFunction, getDataType) { 
    $.ajax({ 
     type: 'get', 
     cache: false, 
     url: service, 
     error: function(XMLHttpRequest, textStatus, errorThrown){ 
      failureFunction(XMLHttpRequest, textStatus, errorThrown); //Pass error details to the failure function 
     }, 
     success: function(data) { 
      successFunction(data); //pass data to the success function 
     }, 
     dataType: getDataType 
    }); 
}

喜歡的東西即服務是URL的地方，successFunction是你對數據做某事的人，dataType是你將要接收的預期數據類型。

JQuery Docs

這似乎有點勢不可擋，我很抱歉，我傾向於使用倒閉，所以我只有一個或兩個通用的AJAX功能（GET和POST），有興趣的人士在這裏是一個樣本函數調用該功能的getData上述

function getUserLabs() 
{ 
    function successFunction(data){ 
     userLabs = new Array(); 
     $.each(data, function(i,item){ 
      var labID = data[i]['pk']; 
      var labName = data[i]['fields']["name"]; 

      userLabs.push(new Array(labID, labName)); 
     }); 
    } 

    function failureFunction(data) { 
     alert("Data not received"); 
    } 

    getData('lab/summary/', successFunction, failureFunction, 'json'); 
}

來源

2010-11-22 13:30:36

您可以簡單地使用'error：failureFunction，success：successFunction'而不是用另一個匿名函數包裝它。另外，我不會將參數'XMLHttpRequest'而是'xhr'稱爲'XMLHttpRequest'是現有類的名稱。 – ThiefMaster 2010-11-22 13:33:32

更好嗎？ – 2010-11-22 13:36:46

$.ajax({ 
    url: 'test.pl?b64=' + value, 
    success: function(data) { 

     // document.getElementById("in").innerHTML = data; 

     $("#in").html(data); // jQuery way instead of above line 

    } 
});

注：沒有測試，但它不應該太難弄清楚這個代碼在做什麼。

來源

2010-11-22 13:31:00 darioo

爲什麼不使用jQuery來設置html呢？ '$（「＃in」）。html（data）;' – hunter 2010-11-22 13:35:56

'document.getElementById（「in」）。innerHTML = data;'在jQuery中''（「＃in」）。html（data）;'。 – 2010-11-22 13:36:12

@Mike：固定;感謝您指出這一點 – darioo 2010-11-22 13:39:01

爲了減少代碼佔用，我更喜歡使用jQuery.post（）。你可以閱讀更多關於它這裏http://api.jquery.com/jQuery.post/

其實，你指定「GET」作爲你的方法，所以這裏更好的選擇是jQuery.get（）。你可以閱讀更多關於它在這裏http://api.jquery.com/jQuery.get/

例子：

$.get("test.pl", { b64: value }, 
    function(data){ 
     document.getElementById("in").innerHTML = data; 
    });

來源

2010-11-22 13:33:28

最相似的jQuery函數會是$.Get。

$.get('test.pl?b64=' + value, function(data) { 
    $('#in').html(data); 
});

來源

2010-11-22 13:34:41

將AJAX轉換爲jQuery

回答

相關問題