Ajax調用中的未定義錯誤

Question

我是Ajax的新手，我正在嘗試在jsp頁面上顯示已完成的任務和正在進行的任務。 以下是我的ajax請求：

function checkProgress() {
  var uri="<%=request.getContextPath()%>/digitalObject/checkingProgress";
  $.ajax(
    {
      url: uri,
      type: 'GET',
      dataType: 'json',
      async:false,
      timeout: 100,
      success: function(data){
         updateUI(data);
      },
      error: function(xhr, ajaxOptions, thrownError) {
        alert("err"+thrownError+xhr.responseText);
      }
    });
}
function updateUI(data){
  // do something with "data"
  switch(data) {
    case "progress.Decompose":
      $("#decompose").removeClass("notStarted");
      $("#decompose").addClass("progress");
      $("#imgDecompose").html(htmlLoaderImage);
      break;
    case "Main object is decomposed":
      $("#decompose").removeClass("progress");
      $("#decompose").addClass("finished");
      $("#imgDecompose").html(htmlSuccessImage);
      break;
    case "started":
      alert(data);
  }
  checkProgress (uri);
}

這是一個無限的Ajax請求，它將通過在控制器中調用此方法來檢查進度。

@RequestMapping(value="/checkingProgress",method= RequestMethod.GET)
public String checkProgress() {
  System.out.println("In checking progress");
  return progress;
}

但我得到一個未定義的錯誤。 我正在使用Spring MVC。 我不明白為什么會這樣。

Answer 1

如果您的瀏覽器向/ checkingProgress發送有效請求，請首先使用例如firebug進行檢查

然后，由於您的datatype是JSON您可能希望返回有效的JSON 。

Answer 2

我可以建議一個更好的方法..

var updater = setInterval(function(){
   $.ajax(
   {
     url: uri,
     type: 'GET',
     dataType: 'json',
     async:false,      
     success: updateUI
   });
}, 5000), 

function updateUI(data){
   //switch - case and update accrodingly
}

讓回調完成執行比在success回調中進行另一次調用更有意義。

setInterval每隔一段時間執行一次代碼塊。 允許執行其他功能。 並且還保持調用堆棧清潔！

Answer 3

我認為您沒有將請求發送到正確的路徑。 從您發布的控制器代碼段中，您似乎需要將請求映射更改為@RequestMapping(value="/digitalObject/checkingProgress") 。

另外，正如@Michael Laffargue指出你需要返回有效的json。 您可以通過在方法聲明中添加@ResponseBody來實現此目的：

public @ResponseBody String checkProgress() {
    ...
}

確保已啟用MappingJacksonHttpMessageConverter。 您還可以使用Firebug，Chrome開發工具或Fiddler查看您的請求/響應的確切內容。