使用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错误，因为响应头没有正确初始化，并且响应本身的格式不正确。