jQuery重新使用ajax函數

Question

所以我試圖設置一個使用PHP但沒有PHP的網站，所以所有的PHP都與AJAX和jQuery橋接。所以我試圖設置用戶系統在相同的基礎上工作，並使事情更容易我想有一些jQuery的功能，從數據庫中獲取信息。比方說，一個jQuery函數獲取的登錄用戶名：

function postData(dataString, url, type, callback){ 
var request = $.ajax({ 
    url: url, 
    method: "POST", 
    data: dataString, 
    dataType: "JSONP", 
    async: true, 
    success: function(data){ 
     console.log("Server Responce: " + data.value); 
     if(callback != null){ 
      return callback(data); 
     } 
    }, 
    error: function(jqHXR, textStatus){ 
     console.log("Server Error: " + textStatus); 
    } 
}); 
return request; 
} 

因此，例如緣故這是一個運行AJAX調用的函數。它被稱爲變量，它是請求，它什麼都不返回。我也打了個電話，但是如果可以避免的話，我不想一直使用它。在下面你可以看到我想要做的事情。

function getFirstName(userId){ 
    return postData("userId=" + userId, "getFirstName.php", "GET", null); 
} 

function useFirstName1(userId){ 
    rndElement.innerHTML = getFirstName(userId); 
} 

function useFirstName2(userId){ 
    rndElement2.innerHTML = getFirstName(userId); 
} 

所以你可以看到我有一個功能，它與AJAX功能是的getFirstName，然後我有兩個依賴此函數來獲取用戶的名字作品useFirstName1和userFirstName2。我試圖實現的是，當AJAX從php文件中獲得JSON時，它將它發送到getFirstName函數，該函數將調用它，然後該函數將其返回給它自己的調用函數。

現在我已經閱讀，我懷疑這個問題有一個解決方案，我需要依賴回調並在不同場景下多次提交相同的AJAX請求。我不會將異步設置爲false，因爲這違背了我認爲使用AJAX的目的，並且我們都在努力實現更快更動態的Web，但這並沒有幫助。

我正在尋找的是一個簡單的（有指導）或無我是否可以做到這一點。感謝您花時間閱讀。

Answer 1

一些變化...基本上，你需要利用這個事實，即JavaScript是異步的，可以使用回調。在函數結束時返回值通常會在方法體內的調用完成之前發生。

function postData(dataString, url, type, callback){ 
    var request = $.ajax({ 
     url: url, 
     method: "POST", 
     data: dataString, 
     dataType: "html", // This needs to be html 
     async: true, 
     success: function(data){ 
      console.log("Server Response: " + data.value); 
      // check that callback is a function and run it 
      if (typeof(callback)=="function"){ 
       return callback(data); 
      } 
     }, 
     error: function(jqHXR, textStatus){ 
      console.log("Server Error: " + textStatus); 
     } 
    }); 
    // do not return here because it will return before your asynchronous request 
} 

function getFirstName(userId, callback){ 
    return postData("userId=" + userId, "getFirstName.php", "GET", callback); 
} 

function useFirstName1(userId){ 
    getFirstName(userId, funciton(data){ 
     // most likely, for html requests, you'll get back responseText 
     if (typeof(data.responseText)!="undefined") { 
      rndElement.innerHTML = data.responseText; 
      return true; 
     } 

     // well, maybe it returned xml 
     if (typeof(data.responseXML)!="undefined") { 
      rndElement.innerHTML = data.responseXML; 
      return true; 
     } 

     // give up and just set the response data 
     rndElement.innerHTML = data;   
    }); 
} 

function useFirstName2(userId){ 
    getFirstName(userId, funciton(data){ 
     if (typeof(data.responseText)!="undefined") { 
      rndElement2.innerHTML = data.responseText; 
      return true; 
     } 
     if (typeof(data.responseXML)!="undefined") { 
      rndElement.innerHTML = data.responseXML; 
      return true; 
     } 
     rndElement.innerHTML = data; 
    }); 
} 

Answer 2

是的，如果您不想將getPostData函數更新爲async: false，則需要依靠傳回來執行此操作。我能想到的最簡單的好辦法得到這個工作，是更新getFirstName採取回調值，只是把它封送到getPostData功能是這樣的：

function getFirstName(userId, cb){ 
    return postData("userId=" + userId, "getFirstName.php", "GET", cb); 
} 

而且你只需修改您的輔助函數：

function useFirstName1(userId){ 
    getFirstName(userId, function (data) { rndElement.innerHTML = data; }) 
} 

function useFirstName2(userId){ 
    getFirstName(userId, function (data) { rndElement2.innerHTML = data; }) 
} 

Answer 3

我不認爲這是可以實現的確切方式。

'postData'和'getFirstName'都返回ajax對象，您將需要使用回調或承諾。

你需要做simething這樣的：

function useFirstName1(userId){ 
    getFirstName(userId).done(function (response) { 
      rndElement.innerHTML = response; 
    }); 
} 

但底線是這樣的：如果你使用異步，那麼你就需要某種回調。

另外你在postData的原始定義中沒有使用'type'和'callback'參數。