AJAX GET請求只有在按下並重試後纔有效

我有最難懂的錯誤，我不明白。我正在使用帶有thymeleaf的Spring Boot，並且有一個AJAX GET請求。AJAX GET請求只有在按下並重試後纔有效

基本上，我正在做一個使用String參數來查詢mongoDB的REST搜索服務。我的REST API工作正常，我可以查詢任何我想要的內容，但是如果我想通過結果頁面上的搜索框使用我的搜索REST API，則會出現問題。

當我在搜索框上按「搜索」，正在發送我的請求，但我被重定向到「錯誤的請求400 - 必需的字符串參數'searchQuery'不存在」。但是，當我按下瀏覽器中的按鈕並鍵入任何查詢時，就會發送之前沒有工作的查詢。我的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

來源

2016-07-29 qwerty

我看到它失去「searchQuery」的值......按鈕上還有其他什麼東西連接起來？怎麼樣......你可以在alert（「yay2」）之後嘗試'return false;'來停止冒泡並阻止窗體提交？我的猜測是它正在提交表單，你可以將click事件參數傳遞給doAjax並調用'evt.preventDefault（）;'看看這是否足夠但如果輸入提交，你的按鈕不是，所以它也讓我感到困惑。如果你不能將這段代碼複製到重播器中並重現它，我的猜測是頁面上的其他內容正在影響它。 – Zach

非常感謝您的評論，非常感謝！ Voyta的建議非常完美 - 這樣的小事和這樣的問題！ :)你說的是正確的 - 這是默認行爲！ – qwerty

我的榮幸。保持submit類型的按鈕並使用'evt.preventDefault（）;'而不是將類型更改爲'button'有一個好處。如果你保留它的類型提交，那麼用戶可以點擊輸入焦點的文本框，它會提交按鈕。我通常在表單提交事件上連接我的事件，這樣我就可以驗證火災。 – Zach

兩件事：

您需要將var searchQuery = document.getElementById("search_input").value;放入doAjax（）函數中。現在它只在頁面加載時獲得一次值。

您需要防止按鈕的默認操作 - 提交表單。例如。 <button onclick="doAjax();" type="button">GO</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>

來源

2016-07-29 02:27:39 Voyta

噢，我的天啊，非常感謝你！它完美的工作！我不知道它只獲得了一次價值 - 但它確實很有意義。真的很感謝你的幫助:) – qwerty

AJAX GET請求只有在按下並重試後纔有效

回答

相關問題