使用Spring MVC在Ajax響應中獲取406錯誤

Question

我正在學習Ajax並試圖讓它在我的項目上工作。基本上我試圖實施谷歌喜歡項目的建議。
我有發送Ajax請求到服務器異步和得到相關的建議

function showHint(str) { 
 
    if (str.length == 0) { 
 
     document.getElementById("txtHint").innerHTML = ""; 
 
     return; 
 
    } else { 
 
    \t console.log(str); 
 
     
 
    \t var xmlhttp = new XMLHttpRequest(); 
 
    \t console.log(xmlhttp.readyState); 
 
     xmlhttp.onreadystatechange = function() { 
 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
 
       document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
 
      } 
 
     }; 
 
     xmlhttp.open("GET", "/hint?word=" + str, true); 
 
     xmlhttp.send(); 
 
    } 
 
}

<label>Name <input id="peak" type="text" name="peak_name" onkeyup="showHint(this.value)"> 
 
\t \t \t \t \t \t \t <p id="peak"></p> 
 
\t \t \t \t \t \t <p>Suggestions: <span id="txtHint"></span></p>

的Spring MVC的控制器

@RequestMapping(value = { "/hint" }, method = RequestMethod.GET,params={"word"}) 
public @ResponseBody ArrayList<String> hint(ModelMap model,@RequestParam String word) { 
    System.out.println("Inside Hint"); 
    String[] hints = { "Ram", "Shyam" }; 

    ArrayList<String> returnhint = new ArrayList<String>(); 

    // lookup all hints from array if $q is different from "" 
    if (word != null) { 
     word = word.toLowerCase(); 
     int length = returnhint.size(); 
     for (int j = 0; j < length; j++) { 
      if (word.contains(hints[j])) { 

       returnhint.add(hints[j]); 

      } 
     } 

    } 
return returnhint; 

} 

我是新來的Ajax的UI。那麼是否有具體的方法xmlhttp對象的responseText必須處理？
我的問題是，因爲我已經在響應正文中傳遞ArrayList，那麼如何獲得ajax來獲取該響應並相應地更新UI？

Answer 1

通過documentation去，XMLHttpRequest對象都有一組屬性來處理響應

XMLHttpRequest.response只讀
返回一個ArrayBuffer，斑點，文檔，JavaScript對象，或一個DOMString，這取決於XMLHttpRequest.responseType的值。包含響應實體主體。

所以我基本上返回的字符串，而不是一個ArrayList中的使用逗號「」分隔符

而在javascript文件串接所有匹配暗示的的字符串中。我只是用split（'，'）函數列出了一個響應。

function showHint(str) { 
 
    if (str.length == 0) { 
 
     document.getElementById("txtHint").innerHTML = ""; 
 
     return; 
 
    } else { 
 
    \t console.log(str); 
 
     
 
    \t var xmlhttp = new XMLHttpRequest(); 
 
    
 
     xmlhttp.onreadystatechange = function() { 
 
     \t \t 
 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
 
      \t \t var list=xmlhttp.responseText.split(','); 
 
      \t \t console.log(list); 
 
       document.getElementById("txtHint").innerHTML = list; 
 
      } 
 
     }; 
 
     xmlhttp.open("GET", "/hint?word=" + str, true); 
 
     xmlhttp.send(); 
 
    } 
 
}

<label>Name <input id="peak" type="text" name="peak_name" onkeyup="showHint(this.value)"> 
 
<p id="peak"></p> 
 
<p>Suggestions: <span id="txtHint"></span></p>

控制器方法

@RequestMapping(value = { "/hint" }, method = RequestMethod.GET,params={"word"}) 
public @ResponseBody String hint(ModelMap model,@RequestParam String word) { 
    System.out.println("Inside Hint"); 
    String[] hints = { "Ram", "Ra","R","Shyam" }; 

    String returnedhints=""; 
    // lookup all hints from array if $q is different from "" 
    if (word != null) { 
     System.out.println("i am here"); 
     //word = word.toLowerCase(); 
     int length = hints.length; 
     for (int j = 0; j < length; j++) { 
      System.out.println(word+"contains"+hints[j]+"="+word.contains(hints[j])); 
      if ((word.regionMatches(0, hints[j], 0, hints[j].length())) { 
       returnedhints= returnedhints+","+hints[j]; 
      } 
     } 
    } 

return returnedhints; 

} 

希望這將有助於與Spring MVC的未來阿賈克斯學習。

Answer 2

要使用@ResponseBody需要兩樣東西：

• <mvc:annotation-driven />在上下文文件
• 庫來處理JSON（如更快傑克遜）在類路徑

如果你不這樣做配置良好的春天的一部分，你將有一個406錯誤，因爲響應頭沒有正確初始化，並且響應本身的格式不正確。