个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
28
4
我正在尝试将 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/
28
4
0
问题:如何对文本文字中的多个连续下划线进行转义？ 我正在为 HTML 使用标准的 Thymeleaf 方言(我不在这里使用 Spring 或 SpEL)。 在 Thymeleaf 中，我可以将下划线创
在 SaaS 应用程序中，我使用了一些模板来生成通知电子邮件或某些 HTML 页面。到目前为止，我没有使用 thymeleaf，而且所有模板都是硬编码的，但我很想改变它，以便应用程序的用户可以自己编辑
我看到JSP页面有.jsp/.jspf/.jspx后缀(来自 JavaServer Pages™ Specification Version2.2)，Velocity 模板使用 .vm后缀，FreeM
我有一个像这样的 Thymeleaf 片段 ... 脚本部分我只想包含它一次，即使我会在页面中多次包含 f1 。实现这一目标最简单/最干净的方法是什么？ 我什至可以将此片段拆
两个 Thymeleaf 属性有什么区别:th:include 和 th:replace？ 最佳答案 根据documentation如果您遇到这种情况: content here 片段将被放置在
我是 Thymeleaf 初学者。我从一个通用布局页面开始: fragments/layout.html Template title Some text
我有两个数组，我想在同一个表(不同的列)中显示其内容。如何使用 index 或 th:each 遍历数组 这是我想要实现的目标 List1Elm1 List
我在 session 中有一个对象，例如一个部门，这个部门有 child 。我得到了它的 child 的列表，现在我想在这个列表中添加这个部门对象。这在服务器端非常简单，但可以做到这个在 thymel
我的 Thymeleaf 页面中有几个下拉列表，如下所示: 当我查看页面时，列表中的第一个值显示为已选中，并且实际上已作为选中值提交，即使它不是手动选中的。我宁愿默认不选择任
我有一个通用的布局，默认情况下，除已包含(更高级的)搜索表单的搜索页面本身之外，每个页面上均应显示(基本)搜索表单。 是否可以将参数从我的搜索页面传递到版式，以便不显示默认搜索表单？ 这是我想做的一个
我有一个 User 对象列表，我想将它转换为一个名称列表，加入它并呈现它(不是在表格中)。我该怎么做？ class User { String name; String address; }
我在前端使用thymeleaf，我知道variable中的thymeleaf概念 如果我使用th:text，变量中的值将被打印，并且我可以在同一元素中使用该变量。有没有办法在其他元素中使用var呢？
我知道 Thymeleaf 是为渲染 View 而制作的，但是我只是想知道是否有任何方法可以在 Thymeleaf 片段的请求范围内设置变量？ 我有一个非常大的条件表达式，我必须在整个应用程序中重复很
假设我有两个 Thymeleaf 模板: index.html : foo bar 片段/main.html : This is the main cont
我想声明一些布局用作所有表单字段的模板。 大致给出这个片段 Edition description 这个片段“调用” 它将产生
在 Thymeleaf 中实现 Markdown 的最佳方式是什么？ 模板模式 一种新的方言(什么处理器？) 如果我可以在 HTML 中嵌入 markdown，那将会很有用。 最佳答案 根据我对 Ja
我想使用模板片段创建最多包含三个项目的列表。无论是否有项目，项目都会显示三个空格，因此看起来像这样。 0}" th:insert="code-block :: block(${bloc
如何从 Thymeleaf 重定向页面(我有如下 JSP 代码) out.println("REDIRECT=http://www.example.com/api/response?id="+id)
我想在 Thymeleaf 的字符串中放置双引号，我有以下形式: 我想要的结果是: Value of "apple" is "1.5". 但我得到以下异常: EL1065E: unexpected
我想使用模板片段创建最多包含三个项目的列表。无论是否有项目，项目都会显示三个空格，因此看起来像这样。 0}" th:insert="code-block :: block(${bloc
我是一名优秀的程序员,十分优秀！