Spring MVC Ajax搜索表单

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

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

这就是我的jQueryAjax表单的样子，在ChromeDeveloper工具的控制台中，它返回“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>

这是我的控制器，我知道这不起作用，因为我返回的是字符串而不是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";
}

@RequestMapping（value=“/setSearch/search”，method=RequestMethod.POST）
public@ResponseBody字符串搜索（@RequestParam String newSearch，ModelMap model）
{   
List questionAnswerSetByQuestion=（List）questionAnswerSetRepo.findByQuestionContaining（newSearch）；
model.put（“搜索结果”，问题回答SetByQuestion）；
返回“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";
}

@RequestMapping（value=“/setSearch”，method=RequestMethod.GET）
公共字符串searchGet（ModelMap模型）{
SearchForm SearchForm=新的SearchForm（）；
model.put（“searchForm”，searchForm）；
返回“setSearch”；
}
@RequestMapping（value=“/setSearch”，method=RequestMethod.POST）
公共字符串searchPost（@modeldattribute SearchForm SearchForm，ModelMap model）{
List questionAnswerSetByQuestion=（List）questionAnswerSetRepo.findByQuestionContaining（searchForm.getSearchString（））；
model.put（“搜索结果”，问题回答SetByQuestion）；
返回“setSearch”；
}

---

如果我遗漏了什么，或者您需要查看更多代码才能看到我的问题，请告诉我。提前感谢。

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

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

HTML

搜索：

Javascript

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

$.get（“/search”，{term:$（'#search_input'）.val（）}，函数（数据）{
//在这里进行数据操作和转换
});

控制器

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

    List<Object> retVal = getListOfObjectFromDbBasedOnQuery(query);

    return retVal;
}

RequestMapping（“/search”）
public@responseBy列表searchPost（@RequestParameter（“术语”）字符串查询）{
List retVal=GetListofObject fromDBbasedOnQuery（查询）；
返回返回；
}

---

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

这看起来确实简单多了，我是javascript部门的初学者，那么这需要什么样的“数据操作和转换”，也可以在提交数据的情况下重定向到搜索页面？“数据操作和转换”表示您可以对该空间内返回的数据执行任何操作。i、 e.显示它，变换它，随你所愿。是的，有可能重定向到另一个提交了数据的页面，但这是一个全新的问题，你不应该这样做，除非你有类似向导的流程，在这些流程中，你可以分步骤注册。如果您只打算进行搜索，那么在通过HTML5Ok中的“必需”属性提交到客户端之前，您应该确保数据存在。我知道这可能是一个单独的问题，但典型的导航栏搜索是如何工作的呢？没有一个一刀切的答案。这确实是一个你需要你的搜索做什么的例子。基于导航栏的搜索表示快速搜索或基于单个参数的搜索。高级搜索，它是一个庞大的表单，您可以在其中输入多个参数，以便在搜索中使用。例如google.com是单参数的，google.com.au/advanced_search是一个复杂的表单。@Docsner如果答案有帮助，你能接受吗，谢谢你的支持

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

<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;
}