Question

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

我正在进行搜索功能的方法是创建一个searchForm.java对象，该对象具有一个名为searchString的字符串变量，然后填充该对象，然后使用我的存储库类中的spring数据方法对控制器中的数据库进行查询。

所以这就是我的jquery ajax表单的样子，并且在chrome开发人员工具的控制台中，它返回“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

如果您只提交一个参数并且它将是restfull，则不需要表单或POST

这是一个简单的例子，说明如何进行从数据库返回对象数组的搜索。我希望你能用它来实现你所需要的。

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

1 个答案: