📌  相关文章
📜  将 jquery 变量值设置为 html 文本字段 spring boot thymeleaf 示例 - Html (1)

📅  最后修改于: 2023-12-03 15:39:12.665000             🧑  作者: Mango

将 jQuery 变量值设置为 HTML 文本字段 Spring Boot Thymeleaf 示例 - HTML

本文将介绍如何使用 Spring Boot 和 Thymeleaf 实现在 jQuery 中将变量值设置为 HTML 文本字段的示例。以下是我们需要完成的任务：

  • 在 Spring Boot 项目中添加 Thymeleaf 依赖项
  • 创建一个包含 jQuery 和 Thymeleaf 脚本的 HTML 文件
  • 创建一个包含 Thymeleaf 模板的 Spring Boot 控制器
  • 使用 jQuery 将值设置为 HTML 文本字段
添加 Thymeleaf 依赖项

在 pom.xml 文件中，添加以下依赖项：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

这将为我们的 Spring Boot 项目添加 Thymeleaf 依赖项。

创建 HTML 文件

创建一个 HTML 文件，添加 jQuery 和 Thymeleaf 脚本。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
   <title>jQuery and Thymeleaf Example</title>
   <script src="https://code.jquery.com/jquery-3.5.1.min.js"
           integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rpNq9YYgT7FRyqhBn6U7XmYX6p7kR6vI+" 
           crossorigin="anonymous"></script>
</head>
<body>
   <h1>jQuery and Thymeleaf Example</h1>
   <p>
      Input Value: <input type="text" id="input"/>
   </p>
   <p>
      Output Value: <span id="output" th:text="${output}"></span>
   </p>
   <script th:inline="javascript">
      $('#input').on('input', function() {
         var inputValue = $(this).val();
         /* 使用 Thymeleaf 设置文本字段 */
         $('#output').text(/*[[${output}]]*/  "" + inputValue);
      });
   </script>
</body>
</html>

这个 HTML 文件包含一个输入框和一个输出框。当输入框的值改变时，我们将值设置为输出框的文本字段。

创建 Spring Boot 控制器

创建一个包含 Thymeleaf 模板的 Spring Boot 控制器。

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class MainController {

    @GetMapping("/")
    public String index() {
        return "index";
    }

    @PostMapping("/")
    public String post(@RequestParam("input") String input, Model model) {
        model.addAttribute("output", input);
        return "index";
    }

}

这个控制器定义了两个路由：GET 请求路由到主页，POST 请求将输入框的值设置为模板的 output 参数。

输出结果

现在运行 Spring Boot 应用程序。在浏览器中打开主页，您将看到包含输入框和输出框的页面。当您在输入框中输入值时，该值将作为输出框的文本字段。

jQuery and Thymeleaf Example

以上就是如何使用 Spring Boot 和 Thymeleaf 实现在 jQuery 中将变量值设置为 HTML 文本字段的示例。