如何在文本框值更改时提交百里香叶表格?



我正在使用Spring Boot和Thymeleaf开发一个简单的应用程序。我想提交有关文本框值更改的表单。我不确定我们是否可以通过java脚本调用"th:action="@{/greeting}"?

--这是我的html问候语.html

<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Getting Started: Handling Form Submission</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Form</h1>
<form action="#" th:action="@{/greeting}" th:object="${greeting}"
method="post">
<table border="1">
<tr>
<td>Id:</td>
<td><input type="text" th:field="*{id}" /></td>
</tr>
<tr>
<td>Message:</td>
<td><input type="text" th:field="*{content}" /></td>
</tr>
</table>
<p>
<input type="submit" value="Submit" /> <input type="reset"
value="Reset" />
</p>
</form>
</body>
</html>

--控制器类 :: 问候控制器.java

package com.example.handlingformsubmission;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
@Controller
public class GreetingController {
@GetMapping("/greeting")
public String greetingForm(Model model) {
Greeting greeting = new Greeting();
greeting.setId(108);
greeting.setContent("Welcome");
model.addAttribute("greeting", greeting);
return "greeting";
}
@PostMapping("/greeting")
public String greetingSubmit(@ModelAttribute Greeting greeting) {
greeting.setId(greeting.getId()+1);
return "greeting";
}
}

Javascript不会知道th:action="@{/greeting},因为它是thymeleaf域名。 相反,您可以简单地使用/greetingURL,因为您位于同一域名中,它将直接命中您的控制器。jquery 中的一个例子可以是这样的:

function onChange() { $.ajax({ url: '/greeting', type: 'POST', data: {attribute_of_greeting_1:'value_to_post_1',attribute_of_greeting_2:'value_to_post_2'} }) } 广告,然后将此功能链接到您的活动。

相关内容

最新更新