我正在尝试将 ajax 与 thymeleaf 结合使用。我设计了一个带有两个输入字段的简单 html 页面。我想使用 addEventHandler 作为第一个输入文本的值，然后我想将它发送到 Controller 并进行计算，之后我需要在返回的第二个字段中以相同的 html 形式编写它从 Controller 。
例如:
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>
我的 Controller
@RequestMapping(value = "/testurl", method = RequestMethod.GET)
public String test(Model model) {
model.addAttribute("responseMsg","calcualted value")
return "test";
}
但是我不能从 ajax 调用 Controller 。你能帮帮我吗？
最佳答案
您的代码存在一些问题。首先，看起来您在应用程序的初始加载和返回计算结果时都使用了相同的模板。
如果您使用的是 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)。
关于Ajax Thymeleaf Springboot，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44826044/