Question

我有一个我不明白的最奇怪的错误。我正在使用带有百万美元的Spring Boot并且有一个AJAX GET请求。

基本上，我正在创建一个使用String参数来查询mongoDB的REST搜索服务。我的REST API工作正常，我可以查询我想要的任何内容，但是如果我想通过结果页面上的搜索框使用我的搜索REST API，问题就会出现。

当我按下＆＃34;搜索＆＃34;在搜索框中，我的请求正在发送，但我被重定向到＆＃34;错误请求400 - 必需字符串参数＆＃39; searchQuery＆＃39;不存在＆＃34;。但是，当我在浏览器中按下后退按钮并键入任何查询时，将发送以前没有工作的查询。我的AJAX请求是否不正确，是否与Thymeleaf的工作方式或其他魔法有关？

这是我的AJAX请求：

 var searchQuery = document.getElementById("search_input").value;

            function doAjax() {
                $.ajax({
                    url: "/search",
                    type: 'GET',
                    data: {
                        searchQuery: searchQuery
                    }
                }).success(function (data) {
                        window.location.href = "/search?searchQuery=" + searchQuery;
                });

                alert("yay2");
            }

这是我的HTML：

  <form>
       <label for="search_input">Search:</label>
       <input type="text" id="search_input"></input>
       <button onclick="doAjax()">GO</button>
   </form>

这正是发生的事情（因为我是初学者，我可能不会自己解释清楚）：SEE THIS GIF I MADE

Answer 1

2件事：

您需要将var searchQuery = document.getElementById("search_input").value;放在doAjax（）函数中。现在它只获得一次值 - 在页面加载时。

您需要阻止按钮默认操作 - 提交表单。例如。 <button onclick="doAjax();" type="button">GO</button>（如果未指定type，则type =“submit”为默认值并提交表单，type =“button”不会。

    function doAjax() {
        var searchQuery = document.getElementById("search_input").value;
        $.ajax({
            url: "/search",
            type: 'GET',
            data: {
                searchQuery: searchQuery
            }
        }).success(function (data) {
                window.location.href = "/search?searchQuery=" + searchQuery;
        });

        alert("yay2");
    }

HTML：

<form>
   <label for="search_input">Search:</label>
   <input type="text" id="search_input"></input>
   <button onclick="doAjax()" type="button">GO</button>
</form>

只有在按下并再次尝试后，AJAX GET请求才有效

1 个答案: