Thymeleaf按钮在新选项卡中使用参数调用url
Thymeleaf 是一个用于服务器端 Java 模板引擎，它可以与 Spring 框架无缝集成，用于创建动态的 HTML 页面。要在新选项卡中打开带有参数的 URL，可以使用 HTML 的 <a> 标签，并结合 Thymeleaf 的表达式语法来设置 href 属性。
基础概念
- Thymeleaf: 一个现代的服务器端 Java 模板引擎，适用于 Web 和独立环境，能够处理 HTML、XML、JavaScript、CSS 甚至纯文本。
- URL 参数: 在 URL 中传递的键值对，用于向服务器请求特定的数据。
相关优势
- 易于集成: Thymeleaf 可以轻松地与 Spring Boot 集成。
- 自然模板: 即使在没有启动服务器的情况下，Thymeleaf 模板也可以作为静态原型使用。
- 表达式语法: 提供了丰富的表达式语法，便于在模板中嵌入动态内容。
类型
- 标准表达式:
${...}用于变量表达式。 - 选择表达式:
*{...}用于对象属性的选择。 - 消息表达式:
#{...}用于国际化消息。 - 链接表达式:
@{...}用于生成 URL。
应用场景
- Web 开发: 创建动态 Web 页面。
- 表单处理: 在表单提交时传递参数。
- 国际化: 支持多语言内容的显示。
示例代码
假设你有一个控制器方法，它接受一个参数 id 并返回相应的视图：
@Controller
public class MyController {
@GetMapping("/item")
public String getItem(@RequestParam("id") Long id, Model model) {
// 根据 id 获取项目信息并将其添加到模型中
Item item = itemService.getItemById(id);
model.addAttribute("item", item);
return "item";
}
}在 Thymeleaf 模板中，你可以这样创建一个在新选项卡中打开带有参数的 URL 的按钮：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Item Details</title>
</head>
<body>
<a th:href="@{/item(id=${item.id})}" target="_blank">View Item Details</a>
</body>
</html>在这个例子中，th:href 属性使用了 Thymeleaf 的链接表达式 @{...} 来生成 URL，并且通过 ${item.id} 插入了动态的 id 参数。target="_blank" 属性确保了链接在新选项卡中打开。
遇到问题及解决方法
如果你遇到了在新选项卡中打开链接时参数没有正确传递的问题，可以检查以下几点：
- 控制器方法参数: 确保控制器方法的参数名称与 URL 中的参数名称匹配。
- Thymeleaf 表达式: 确认 Thymeleaf 表达式正确无误，并且变量在上下文中是可用的。
- 浏览器缓存: 清除浏览器缓存，有时候旧的缓存可能导致 URL 参数没有更新。
通过以上步骤，你应该能够解决在新选项卡中使用参数调用 URL 的问题。如果问题仍然存在，建议检查服务器日志以获取更多调试信息。
相关·内容
如何在thymeleaf中创建一个按钮作为链接，并在新选项卡中打开一些给定的参数？但现在起作用了： <button th:onclick="window.open('https://www.google.com/location/' + ${id})"> GO</button> 当我使用变量
浏览 38提问于2019-05-09得票数 0
回答已采纳
例如，在GMAIL布局中，假设我现在看到的是“收件箱”的内容，同时，在侧边菜单中，“类别”菜单被打开。然后，如果我用完全相同的URL打开一个新的浏览器选项卡或窗口，“类别”菜单仍然是打开的(最后一项操作)。如何使用Thymeleaf和Spring做到这一点？这个例子中有没有代码片段？我看了一些关于Thymeleaf (片断)和Ajax的东西，但当我打开一个新的选项卡或窗口时，没有看
浏览 0提问于2019-10-20得票数 0
在我的扩展中，我希望在单击工具栏按钮(works)时打开一个新选项卡，在选项卡(works)上显示带有JavaScript的静态HTML页面，并将数据(从起始页的URL)传递给新选项卡(不起作用)。我试过：
使用像myTab.url = safari.extension.baseURI + 'page.html?'+ params这样的查询
浏览 1提问于2013-09-17得票数 0
回答已采纳
我正在使用Puppeteer收集一份远程招聘公司的名单。我试图从其中收集数据的页面调用的操作不是<a href="" blank"_tab"，而是<button></button>。该按钮也没有任何数据属性，当我单击该按钮时，它提示在新选项卡中打开的页面的URL是什么。我现在试图找到一种方法，通过单击上述按钮捕捉新<em
浏览 6提问于2022-04-16得票数 1
回答已采纳
我正在使用以下代码在chrome扩展中创建新的选项卡；chrome.tabs.create({url:url, active: false}, { );
如何识别新打开的选项卡是由我的分机创建的，还是用户在新选项卡<
浏览 1提问于2021-01-14得票数 0
当我点击扩展按钮时，它应该复制当前的url并在新的选项卡中打开google.com，然后将此url放入搜索框或控制台打印url。基本上，将url复制到新选项卡中，该选项卡可用于执行进一步的操作。我们可以使用打开新的选项卡。chrome.browserAction.onClicked.addListener(function(ta
浏览 0提问于2014-08-23得票数 0
1回答
我想知道是否有更好的编写方法(如何将表单数据放在URL中)。当有人单击added时，它应该根据当前登录的用户(w/ spring安全性)在这种类型的url：/cart/{productId}/{quantity}中发送一个post请求，然后将其添加到用户的购物车中Thymeleaf代码：<form action="#&q
浏览 2提问于2020-04-15得票数 0
回答已采纳
2回答
我有一个包含get参数的现有URL。在单击按钮时，我希望更改一个特定的URL参数，但保留其他参数。这有可能吗？Thymeleaf模板：在以下方面的成果：如果我想
保存URL</em
浏览 1提问于2017-08-09得票数 4
如何使用window.open打开新选项卡中的链接？我有一个按钮，当点击应该加载一个url。重复单击应在相同的选项卡/窗口中重新加载。
浏览 6提问于2016-05-17得票数 1
回答已采纳
2回答
我有一个按钮，在那里它使API调用并生成URL，我想在新选项卡中打开URL，一旦我单击该按钮。<button (click)="getUrl()">Connect</button> TS： getUrl() { this.url = 'www.google.com';
console.l
浏览 30提问于2021-10-25得票数 0
回答已采纳
我有一个要求返回到同一页，它启动了我的应用程序，而不打开一个新的浏览器选项卡或导航到一个新的URL。是否有可能以相同的状态返回到原来的网页(实际上是以编程方式从状态栏中调用app按钮--以返回到启动应用程序)？如果不是，听起来我唯一的选择是在safari中打开一个新的选项卡，并将查询参数传递给页面以检索其状态。
浏览 0提问于2018-09-26得票数 3
回答已采纳
我创建了一个用于处理查询的CFC，但我不能使用cfdump和cffile进行调试。通过ajax调用CFC。如何调试CFC页面中的变量输出并显示输出？
浏览 1提问于2016-09-01得票数 2
如何在Postman中发送这些详细信息(POST方法)以接收JSON数据形式的响应？ -d "api_key=xxx" \ -d “name=firstName” \ -d “email=test@test.com”
浏览 1提问于2016-04-30得票数 11
回答已采纳
我尝试使用对象参数将不同形式的值传递给控制器，如下所示：<form id="line_form" action="#" th:object="${lineFilter}" method</form>@ResponseBody
@RequestMapping(value = "/listFilteredByAccount", produces = Med
浏览 2提问于2016-05-13得票数 0
我有一个按钮的网页，如果点击它，一个函数被调用，创建一个pdf，并打开在一个新的选项卡。现在点击这个按钮后，我想重新加载当前页面，然后在一个新窗口打开pdf文件。在没有更改请求url的情况下，我如何执行此操作？我尝试使用下面的代码，但它更改了新选项卡的url：
Response.Redirect(Request.UrlReferrer.ToString()); if (Reque
浏览 5提问于2020-01-18得票数 3
回答已采纳
1回答
我想知道在这种情况下是否有一种打开新选项卡的方法：在每一行上，我都有一个命令链接来编辑这个特定的客户。searchCustomerManageBean.canEdit(customer)}"</p:column>在托管中设置了页面faces-co
浏览 4提问于2017-02-14得票数 0
回答已采纳
我正在做一个Angular应用程序，其中表格的每一行都有一个按钮，单击这些按钮时，应该会为该按钮所在的行打开一个新的选项卡。.state('viewlisting', {
浏览 1提问于2015-10-20得票数 8
回答已采纳
在Axios响应成功后，我想在一个新的选项卡中打开页面链接，我已经搜索了有关它的解决方案，但是浏览器一直阻塞弹出。我尝试了下面的一个，但没有得到工作，也不支持在所有的浏览器
let newTab = window.open(); newTab.location.href = url;
浏览 3提问于2021-07-02得票数 2
回答已采纳
在_layout中，我有一个button，我用click事件附加了它。click事件调用将返回完整view的操作。我想要做的是将返回的view作为一个新页面加载到浏览器中。怎么做？
浏览 1提问于2015-12-21得票数 0
回答已采纳
} } return null;如果用户单击"CREDENCIALES“按钮无论单击什么按钮，都会打开模式，显示该数据中心内所有FisicHosts的所有凭据，我只想显示在相应的数据中心中单击的特定FisicHost的凭据！我在控制器中知道这个逻辑： if(f
浏览 0提问于2018-11-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
