Question

我试图在我的spring mvc网络应用中的每个页面的导航栏中添加搜索表单，就像stackoverflow上的那个，我遇到了问题。现在我使用典型的mvc表单在我的几个页面上有一个工作搜索功能。我取输入的字符串并存储一个名为＆＃34; searchString＆＃34;的变量。在我创建的一个对象中称为＆＃34; searchForm.java＆＃34;。然后我尝试使用spring数据的findbycontaing方法在数据库中查询输入的字符串，然后将该结果放在模型上，然后使用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>

这里可能存在一个问题，因为在Chrome开发者工具的控制台中，在重定向之前，会弹出一条消息，显示uncaught TypeError: Cannot read property 'toLowerCase' of undefined，并且它来自jquery.min.js:5这可能是我的问题，但我不知道如何解决这个问题，到目前为止我还没有找到答案。

这是我的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="submit" 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;
}
}

这是我的控制器，我试图处理ajax提交并将其作为搜索结果返回到setSearch.html页面。我在这里想的是字符串＆＃34; newSearch＆＃34;从表单可以使用Spring Data查询方法进行匹配，然后能够将其返回并添加到模型中，但它不起作用，它只是将我重定向到/ 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";
}

这是我在控制器中使用的一种工作搜索方法的示例，我在/ searchSet页面上使用常规表单，没有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";
}

更新

我已将表单中的代码从<button type="submit" class="btn btn-default" id="searchButton">Search</button>更改为<button type="button" class="btn btn-default" id="searchButton">Search</button>，现在我从之前获得Uncaught TypeError: Cannot read property 'toLowerCase' of undefined，页面没有任何反应。

更新

我现在可以毫无问题地提交ajax表单，我在标题中缺少元标记，因此csrf没有正确提交，所以现在我在chrome开发人员工具控制台{{1}中收到此错误}

更新

现在一切都在Ajax端工作，我需要调整我的url以匹配我在控制器上的请求映射中的url，并且它运行完所有代码。但是整体搜索功能仍然不起作用，这里是我更新的控制器。

我知道我的问题是我返回一个字符串而不是一个对象，但我不确定如何返回该对象，然后将该URL重定向到/ setSearch页面。它运行代码并返回一个字符串＆＃34; setSearch＆＃34;在控制台中，因为我在控制器的末尾告诉它。

XHR Loaded (navSearch - 405 Method Not Allowed - 7.265999971423298ms - 634B)

这是我工作的ajax

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

Answer 1

但它不起作用，它只是将我重定向到/ searchSet页面没有数据，因为那就是表格行动所在的地方我告诉它什么回来

您是对的，这是因为您提交的是表单并在您指定的操作中提交给setSearch，这就是为什么页面被重定向到同一页面的原因。只需将button type="submit"替换为button type="button"，以便在点击searchButton时不会提交表单。

带有Thymeleaf的Spring mvc Ajax搜索表单

1 个答案: