如何使Ajax调用和返回结果，同时在输入文本输入 [英] How to make ajax call and get results back while typing in input text

问题描述

我想实现一些功能，这是当我输入一些文本

I want to implement some functionality which is when I enter some text in

<input path="tags" id="input-search"/>

应该出现提示标记列表就像

后使得AJAX调用。我有数据库查询

after making ajax call. I have database query

public interface TagRepository extends JpaRepository<Tag, Integer> {    
    @Query("SELECT t FROM Tag t WHERE name LIKE CONCAT('%', :name, '%')")
    List<Tag> findTagByName(@Param("name") String name);    
}

和控制器code是

@RequestMapping(value = "/getTags", method = RequestMethod.POST, produces = "application/json")
    public  @ResponseBody List<Tag> getTags(@RequestBody Tag tag, HttpServletResponse response) {
        System.out.println("Found " + String.valueOf(tagService.findTagByName(tag.getName()).size()));
        return tagService.findTagByName(tag.getName());

    }

JavaScript的Ajax是

javascript for ajax is

 $(document).ready(function() {   
        $("#tag-search").autocomplete({
            source: function(request, response) {
                $.ajax({
                 url: "/app/getTags/", 
                 type: "POST", 
                 data: JSON.stringify({tag : request.term}),
                 dataType: "json",
                success: function(data) {
                    response($.map(data, function(v,i){
                        console.log();
                        return {
                            label: v.empName,
                            value: v.empName
                         };
                    }));
                }
               });              
            }   
        });
    });

<div class="col-md-10 col-md-push-1">                                                   
    <label class="floating-label" for="login-username">Tags</label>
    <form:input path="tags" cssClass="form-control" id="tag-search"/>
</div>

当我运行应用程序，我看到了开发者工具这个JavaScript错误

when I run the app I see this javaScript error in Developers Tools

我使用 Daemonite /材料为我的前端和放大器; 的jQuery自动完成，最后一个好处是应用程序的最新版本的相对=nofollow> 任何一个可以告诉我，我该怎么摆脱的是的错误任何反应是值得欢迎的。

I'm using Daemonite/material for my front-end & jQuery-Autocomplete, finally a good thing is that the latest version of App is on GitHub can any one tell me how can I get rid of that error any response is welcome.

推荐答案

它只是意味着你得到的HTML，而不是JSON响应。

It simply means that you are getting HTML instead of JSON in response.

的意外＆LT; 的是指你的要求的回应的第一个字符。 在Chrome的控制台，你可以去网络选项卡，单击您的请求，并在右侧看到究竟你的服务器返回返回到客户端。

"Unexpected <" is referring to the first character of your request's response. in chrome console you can go to network tab and click on your request and in the right side see what exactly your server is returning back to client.

这篇关于如何使Ajax调用和返回结果，同时在输入文本输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！