带Thymeleaf的Spring mvc Ajax搜索表单

我正试图在我的spring mvc web应用程序的每个页面的导航栏中添加一个搜索表单，就像stackoverflow上的表单一样，我遇到了一些问题。现在，我在我的几个页面上使用了一个有效的搜索功能，使用典型的mvc表单。我获取输入的字符串并将名为“searchString”的变量存储在我创建的名为“searchForm.java”的对象中。然后，我尝试使用spring数据的FindByContain方法查询数据库中输入的字符串，然后将结果放在模型上，然后使用thymeleaf在视图上表示。然而，我认为导航栏应该使用ajax来完成，因为它在每个页面和其他表单的页面上

因此，我想我正在将提交到导航栏中搜索表单的字符串发送到控制器，在那里我在存储库中查询它以返回搜索结果，然后我尝试将搜索结果放在模型上，但我什么也没有得到，它所做的只是将我重定向到搜索页面。我可能没什么道理，但我会展示我的代码，如果有人能让我知道我是否以正确的方式处理我的问题，如果你们看到我的代码中有任何错误。提前谢谢

下面是我提交表单的ajax和jquery

<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 : "navSearch",
            type : "post",
            data : {
                "newSearch" : $("#newSearch").val()
            },
            success : function(data) {
                console.log(data);
            },
            error : function() {
                console.log("There was an error");
            }

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

这是我的searchForm.java类，我临时将要查询的字符串存储在数据库中

public class SearchForm {

private String searchString;

public String getSearchString()
{
    return searchString;
}

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

这是我的控制器，我试图处理ajax提交，并将其作为搜索结果返回到setSearch.html页面。我在这里想的是，表单中的字符串“newSearch”可以使用Spring数据查询方法进行匹配，然后能够返回它并将其添加到模型中，但它不起作用，它只是将我重定向到没有数据的/searchSet页面，因为这是表单操作的所在，也是我告诉它返回的内容。所以老实说，我不确定是否有任何数据达到了这一点

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

    return "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>

/**/

但它不起作用，它只是将我重定向到/searchSet页面 没有数据，因为那是表单操作的地方 我对它说什么让它回来

---

您是对的，这是因为您正在提交表单，并且在操作中指定表单提交到

setSearch

，这就是页面被重定向到同一页面的原因。只需将

button type=“submit”

替换为

button type=“button”

，这样在单击

searchButton

时表单就不会提交。

一些事情，搜索应该是一个GET而不是POST请求（遵循Restfull原则）。接下来单击控制台本身中的错误，并查看其来源。它是来自javascript还是您的服务器代码？然后复制错误代码部分并将其放入问题中。错误来自

jquery.min.js:5

请求是否已发布？我没有看到你发布的代码有任何错误。可能是由其他代码引起的。这很奇怪，但现在它说它在第9026行，当我点击它时，它与这一节有关

setRequestHeader:function（name，value）{var lname=name.toLowerCase（）；if（！state）{name=requestHeadersNames[lname]=requestHeadersNames[lname]| | name；requestHeader[name]=value；}

我明白了，所以问题就在这里

xhr.setRequestHeader（header，token）

。可能没有定义名为

\u csrf

和

csrf\u头

的元？好的，我更改了，现在它不再重定向，但我得到错误

未捕获类型错误：仍然无法读取控制台中未定义的
的属性“toLowerCase”。
    @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/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";
}

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