无法对服务器

时间:2015-10-01 04:31:10

标签: javascript jquery ajax spring

我曾尝试在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 任何人都可以为我解决这个错误或者告诉我哪里错了。 对不起,如果我的英语不正确。

1 个答案:

答案 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>确定您要执行的操作。