2012-02-18 54 views
3

可能重複:
jQuery Ajax always returns 「undefined」?jQuery的 - 創建一個通用的AJAX功能

我試圖想出一個通用的jQuery AJAX功能,使用url &參數和返回結果。我試圖避免使用async:false,因爲它鎖定了瀏覽器。如果我在ajax調用中使用success回調,由於時間問題返回的數據爲空(成功不會等到數據返回)。如果我使用complete,則persons對象在LoadPersons方法中仍然爲空,因爲它不會等待從ajax調用返回數據。如果在complete回調中放置alert(persons),我得到[object][Object],因此我將數據恢復。我如何「修復」這個問題?我說話有道理嗎?我也希望在這樣做時顯示「加載..」圖像。

這裏是我的代碼 -

<script type="text/javascript"> 
    $(function() { 
       var persons; 
       var urlGetPersons = "Default.aspx/GetPersons"; 

       LoadPersons(); 

       function LoadPersons() { 
        persons = CallMethod(urlGetPersons, { }); 
        if (persons != null) { 
         // do something with persons. 
        } 
       } 

       function CallMethod(url, parameters) { 
        var data; 
        $.ajax({ 
         type: 'POST', 
         url: url, 
         data: JSON.stringify(parameters), 
         contentType: 'application/json;', 
         dataType: 'json', 
         success: function(result) { 
          data = result.d; 
         }, // use success? 
         complete: function(result) { 
          data = result.d; 
         } // or use complete? 
        }); 
        return data; 
       } 
      }); 
    </script> 
+1

'我試圖想出一個通用的jQuery AJAX函數,它接受的URL和參數,並返回結果'是不是'$ .ajax()'是什麼? – 2012-02-18 00:10:26

+0

我明白了。我只是想拿出一個簡寫。我知道我可以使用'.ajaxSetup'並設置默認值,但它仍然需要幾行來編寫實際的函數。 – tempid 2012-02-18 00:12:05

+1

這樣的函數不能在不鎖定瀏覽器的情況下同步返回結果,這就是爲什麼ajax是異步的。 Javascript沒有別的事情要做,只能在服務器返回響應時掛起。 – Diego 2012-02-18 00:13:22

回答

13

這是什麼在我腦海中有「通用」 - 但它仍然是異步:

function CallMethod(url, parameters, successCallback) { 
       //show loading... image 

       $.ajax({ 
        type: 'POST', 
        url: url, 
        data: JSON.stringify(parameters), 
        contentType: 'application/json;', 
        dataType: 'json', 
        success: successCallback, 
        error: function(xhr, textStatus, errorThrown) { 
         console.log('error'); 
        } 
       }); 
      } 

CallMethod(url, pars, onSuccess); 

function onSuccess(param) { 
    //remove loading... image 
    //do something with the response 
} 
+0

謝謝。它看起來好像更少的代碼。我不應該使用'complete'而不是'success'?我認爲Success只是調用該方法,並返回到Complete返回的位置,直到服務器端處理完成。 – tempid 2012-02-18 00:29:09

+0

唯一不同的是,'complete'在'success'之後觸發。 回調函數是我想到的唯一解決方案。如果它仍然不起作用,請嘗試一些調試,如'function onSuccess(param){if(param == null){alert('no result'); (!param.hasOwnProperty('d')){alert(typeof param); } else { // whatever } }' – 2012-02-18 00:32:09

+0

我可以將'CallMethod'和'function onSuccess {}'結合嗎?像CallMethod(url,pars,function(){});''所以我不必編寫另一個函數?我希望一切都儘可能緊湊。 – tempid 2012-02-18 00:32:10

0

我知道我已經得到了[對象] [對象]回到之前....你確定你的應用程序返回JSON?如果不是,Json.NET使它非常容易。您可能還需要調用$ .parseJSON。

+0

是的。我使用Firebug並可以看到JSON數據。 – tempid 2012-02-18 00:17:44

0

$ .ajax是一個通用的jQuery函數。

你想要做這樣的事情:

$(function() { 
      function LoadPersons(data) { 
       // do something with data 
      } 

      $.ajax({ 
       type: 'POST', 
       url: url, 
       data: JSON.stringify(parameters), 
       contentType: 'application/json;', 
       dataType: 'json', 
       success: function(result) { 
        // do something with persons (data) 
        // e.g. LoadPersons(data); 
       } 
      }); 
    }); 

以文本形式:

你阿賈克斯成功應該是那是負責做對數據進行處理它成功地返回後位。您的以前的方法嘗試在AJAX方法必須完成之前返回數據。您可以直接在$(function(){..})內添加$ .ajax方法,以便在頁面加載時調用它。

此外,我建議使用Firebug等工具來檢查AJAX調用的輸出/響應。

+1

謝謝。這就是我以前的做法。該網頁約10個這樣的ajax調用(不同的url和params),我只是想使它通用。看起來不使用'async:false'就不能完成,但缺點是它鎖定了瀏覽器。好吧! – tempid 2012-02-18 00:20:15