Ajax Thymeleaf Springboot

我正在嘗試與百里香一起使用ajax。我設計了一個帶有兩個輸入字段的簡單html頁面。我想使用addEventHandler作爲第一個輸入文本的值，然後我想將它發送給控制器並進行計算，之後我需要在從控制器返回的第二個字段中以相同的HTML格式編寫它。Ajax Thymeleaf Springboot

例如：

first input text value -> controller (make calculation) -> (write value) in second input text.

我的HTML頁面

<!DOCTYPE html> 
<html xmlns:th="http://www.thymeleaf.org"> 
<head> 
    <meta charset="UTF-8"> 
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 

<input type="text" name="Thing" value=""/> 
<script th:inline="javascript"> 

    window.onload = function() { 

     /* event listener */ 
     document.getElementsByName("Thing")[0].addEventListener('change', doThing); 

     /* function */ 
     function doThing() { 
      var url = '@{/testurl}'; 
      $("#fill").load(url); 
      alert('Horray! Someone wrote "' + this.value + '"!'); 
     } 

    } 
</script> 
<!-- Results block --> 
<div id="fill"> 

    <p th:text="${responseMsg}"/></div> 
</div> 

</body> 
</html>

我控制器

@RequestMapping(value = "/testurl", method = RequestMethod.GET) 
public String test(Model model) { 
    model.addAttribute("responseMsg","calcualted value") 
    return "test"; 
}

但是我無法從AJAX調用控制器。你可以幫幫我嗎？

來源

2017-06-29 tester

是你的控制器用'@ RestController'還是'@ Controller'註解的？ AJAX經常與REST服務一起使用，在你的情況下，你正在控制器中使用'Model'，這讓我認爲你想要在AJAX調用中返回一個完全呈現的頁面。 – g00glen00b

它的@Controller – tester

你能指定確切的錯誤是什麼？ AJAX請求返回的http代碼是什麼，或者Java端發生了什麼錯誤？謝謝 – emanek

您的代碼有幾個問題。首先，它看起來像是在初始加載應用程序時使用相同的模板，並返回計算結果。

如果您使用的是AJAX，那麼您應該將這兩個分爲不同的調用，因爲AJAX的目標之一是您無需爲一次更改重新加載整個頁面。

如果需要返回一個簡單的值，你應該使用這樣一個單獨的請求方法：

@GetMapping("/calculation") 
@ResponseBody 
public int multiply(@RequestParam int input) { 
    return input * 2; // The calculation 
}

這裏要注意最重要的是，我使用@ResponseBody和我送輸入以此方法作爲@RequestParam。

由於您將直接返回計算值，你不需要Model，也不是responseMsg。所以你可以從原始請求映射中刪除它。

你也可以從你的<div id="fill">中刪除它，因爲你的代碼的目標是使用AJAX來填充這個元素，而不是使用Thymeleaf。所以，你可以有一個空的元素：

<div id="fill"> 

</div>

現在，也有你的Thymeleaf頁的幾個問題。據我所知，'@{/testurl}'不是提供URL的有效語法。正確的語法是使用方括號：

var url = [[@{/calculation}]];

你也必須確保你改變url指向新的請求映射。此外，這看起來不一樣美麗，因爲它是不是有效的JavaScript，寫這個的另一種方法是：

var url = /*[[ @{/calculation} ]]*/ null;

現在，你的腳本也有一些問題。由於您使用$().load()，您必須確保您已將jQuery加載到某處（這看起來像jQuery語法，因此我假設您要使用jQuery）。

您還必須以某種方式發送您的輸入參數。要做到這一點，你可以用將傳遞給doThing()函數的事件對象，例如：

function doThing(evt) { 
    var url = [[@{/calculation}]]; 
    $("#fill").load(url + '?input=' + evt.target.value); 
    alert('Horray! Someone wrote "' + this.value + '"!'); 
}

正如你所看到的，我也加入?input=，這將讓你送過去了值給AJAX調用。

最後，使用$().load()不與AJAX工作的最佳方式調用，除非你嘗試異步加載部分HTML模板。如果你只是想加載一個值，你可以在使用代替下面的代碼：

$.get({ 
    url: /*[[ @{/calculation} ]]*/ null, 
    data: { input: evt.target.value } 
}).then(function(result) { 
    $('#fill').text(result); 
});

注意$.get()可以通過瀏覽器緩存（同樣適用於$().load()雖然）。因此，如果相同的輸入參數可能導致不同的結果，那麼您希望使用不同的HTTP方法（例如，POST）。

來源

2017-06-29 14:07:48 g00glen00b

非常感謝，非常好的解釋。其實我對Thymleaf和Ajax很新。我會盡力去做你的步驟。最好的方面 – tester

@tester我注意到了。順便說一下，對於這種用例，您並不需要Thymeleaf，而可以使用靜態HTML頁面。該邏輯位於JavaScript內部，您使用的唯一Thymeleaf功能是URL，但您也可以使用相對常量URL。 – g00glen00b

你的解決方案是有效的：）和你省下我的一天，非常感謝 – tester

Ajax Thymeleaf Springboot

回答

相關問題