Spring MVC Ajax 搜索表单 Thymeleaf

Question

因此，我尝试在我网站的导航栏中创建一个搜索表单，并使用 ajax 提交该表单。我的网络应用程序中还有其他可用的搜索表单，所以我知道该怎么做。我有 ajax 正确提交。我只是不知道如何从表单中获取数据并在控制器中使用它来获得我想要的结果。

我执行搜索功能的方法是创建一个 searchForm.java 对象，它有一个名为 searchString 的字符串变量，我填充它，然后使用 [=46= 在控制器中查询它对数据库] 我的存储库中的数据方法 class。

这就是我的 jquery ajax 表单的样子，在 chrome 开发人员工具的控制台中它 returns "setSearch" 就像我告诉的它在控制器中，我知道这是个问题，我只是不知道如何解决它。

<script th:inline="javascript">

    /*<![CDATA[*/

    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");

    $(document).ajaxSend(function(e, xhr, options) {
        xhr.setRequestHeader(header, token);
    });

    $(document).ready(function(){
    $("#searchButton").on("click", function(ev) {
        $.ajax({
            url : "/setSearch/search",
            type : "post",
            data : {
                "newSearch" : $("#newSearch").val()
            },
            success : function(data) {
                console.log(data);
            },
            error : function() {
                console.log("There was an error");
            }

        });
    });
  });
/*]]>*/
</script>

这是我的百里香 html 页

<form action = "setSearch" class="navbar-form navbar-right">
            <div class="form-group">
            <input type="text" class="form-control" placeholder="Search" id="newSearch"></input>
            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
            </div>
            <button type="button" class="btn btn-default" id="searchButton">Search</button>
</form>

这是我的searchForm.java对象

public class SearchForm {

private String searchString;

public String getSearchString()
{
    return searchString;
}

public void setSearchString(String searchString)
{
    this.searchString = searchString;
}
}

这是我的控制器，我知道这是行不通的，因为我返回的是字符串而不是 json 对象（我认为这是正确的）。但是我试图改变它，但我遇到了很多错误，我不确定我应该怎么做。

 @RequestMapping(value="/setSearch/search", method=RequestMethod.POST)
public @ResponseBody String search (@RequestParam String newSearch, ModelMap model)
{   
    List<QuestionAnswerSet> questionAnswerSetByQuestion = (List<QuestionAnswerSet>) questionAnswerSetRepo.findByQuestionContaining(newSearch);
    model.put("searchResult", questionAnswerSetByQuestion);

    return "setSearch";
}

这是我的控制器中非 ajax 搜索功能的工作示例，所以你们可以看到我正在尝试做什么。

@RequestMapping(value="/setSearch", method=RequestMethod.GET)
public String searchGet(ModelMap model) {

    SearchForm searchForm = new SearchForm();
    model.put("searchForm", searchForm);

    return "setSearch";
}

@RequestMapping(value="/setSearch", method=RequestMethod.POST)
public String searchPost(@ModelAttribute SearchForm searchForm, ModelMap model) {

    List<QuestionAnswerSet> questionAnswerSetByQuestion = (List<QuestionAnswerSet>) questionAnswerSetRepo.findByQuestionContaining(searchForm.getSearchString());
    model.put("searchResult", questionAnswerSetByQuestion);

    return "setSearch";
}

如果我遗漏了任何内容，或者您是否需要查看更多代码才能了解我的问题，请告诉我。提前致谢。

Answer 1

如果您只提交一个参数并且它会很安静，则不需要表格或 POST

这是一个简单的示例，说明我将如何搜索 returns 数据库中的对象数组。我希望你能用它来实现你所需要的。

HTML

<form>
<label for="search_input">Search:</label>
<input type="text" id="search_input">
</form>

Javascript

<script>
$.get("/search", {term: $('#search_input').val()}, function(data) {
// do your data manipulation and transformation here
});
</script>

控制器

RequestMapping("/search")
public @ResponseBody List searchPost(@RequestParameter("term") String query) {

    List<Object> retVal = getListOfObjectFromDbBasedOnQuery(query);

    return retVal;
}

简单很多（从逻辑的角度来看），记住在 RESTfull 术语中 post 用于创建对象。检索数据仅使用 GET。

Spring MVC Ajax 搜索表单 Thymeleaf

Spring MVC Ajax Search Form Thymeleaf

ajax

spring-mvc

spring-data

thymeleaf