我曾尝试在Spring MVC App中使用ajax,但它似乎无法正常工作我搜索了它并发现了很多资源,但由于我不是专业人士,我无法理解其中任何一个,最后我发现{{3}作为恩典并在Controller中尝试
@RequestMapping(value = "/getBars", method = RequestMethod.POST, produces = "application/json")
public @ResponseBody List<Bar> getBars(@RequestParam String bar, HttpServletResponse response) {
return barService.findBarByName(bar);
}
和javascript是
$(document).ready(function() {
$(function() {
$("#bar-search").autocomplete({
source: function(request, response) {
$.ajax({
url: "/app/getBars",
type: "POST",
data: { term: request.term },
dataType: "json",
success: function(data) {
response($.map(data, function(v,i){
return {
label: v.empName,
value: v.empName
};
}));
}
});
}
});
});
});
最后我的view.jsp是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="initial-scale=1.0, width=device-width" name="viewport">
<title>Ask Question</title>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"/></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="/app/resources/js/autoComplete.js"></script>
<script>
if (window.jQuery) {
alert('jQuery is loaded');
} else {
alert('jQuery is not loaded');
}
</script>
<!-- css -->
<link href="/app/resources/css/base.css" rel="stylesheet">
<!-- favicon -->
<!-- ... -->
<!-- ie -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="form-group form-group-label">
<div class="row">
<div class="col-md-10 col-md-push-1">
<label class="floating-label" for="login-username">Bars</label>
<input id="bar-search" name="bars" class="form-control" type="text" value=""/>
</div>
</div>
</div>
<script src="/crazy/resources/js/base.min.js;jsessionid=4891173C4BB89D06603ACA4FF7D64D20" type="text/javascript"></script>
<script src="/crazy/resources/js/webfont.js;jsessionid=4891173C4BB89D06603ACA4FF7D64D20" type="text/javascript"></script>
<script src="/crazy/resources/js/jquery.autocomplete.min.js;jsessionid=4891173C4BB89D06603ACA4FF7D64D20" type="text/javascript"></script>
</body>
</html>
当应用程序启动时,每件事情都可以,但是当我在输入中写下一些文本时,我会收到错误
this tutorial 任何人都可以为我解决这个错误或者告诉我哪里错了。 对不起,如果我的英语不正确。
答案 0 :(得分:0)
好的......首先是您的服务配置错误。
您的服务需要@RequestParam,但在您的ajax中,您发送的是json对象,这意味着您应该接受@RequestBody。
此外,如果您正在寻找@RequestParam,您需要将该值作为网址的一部分传递,如...
$.ajax({
url: "/app/getBars?bar=" + request.term,
type: "GET"
( ... )
});
@RequestMapping(value = "/getBars", method = RequestMethod.GET, produces = "application/json")
public @ResponseBody List<Bar> getBars(@RequestParam(value = "bar", defaultValue = "abc", required = false) String bar, HttpServletResponse response) {
return barService.findBarByName(bar);
}
或
$.ajax({
url: "/app/getBars/" + request.term,
type: "GET"
( ... )
});
@RequestMapping(value = "/getBars/{bar}", method = RequestMethod.GET, produces = "application/json")
public @ResponseBody List<Bar> getBars(@PathVariable String bar, HttpServletResponse response) {
return barService.findBarByName(bar);
}
发帖。
首先创建一个bean。
public class MyRequestBean implements Serializable{
private static final long serialVersionUID = 1L;
private String bar;
public void setBar(String bar){
this.bar = bar;
}
public void getBar(){
return this.bar;
}
}
然后像这样写你的服务......
@RequestMapping(value = "/getBars", method = RequestMethod.POST, produces = "application/json")
public @ResponseBody List<Bar> getBars(@RequestBody MyRequestBean bean, HttpServletResponse response) {
return barService.findBarByName(bean.getBar());
}
$.ajax({
url: "/app/getBars/,
type: "POST",
data: JSON.stringify({bar : request.term})
( ... )
});
注意:永远不要让动词定义您的服务。
例如, / getBars 可以更改为 / bars ,然后让 HTTP协议(GET,POST,PUT或DELETE等等)< / strong>确定您要执行的操作。