一、th:href概述
在使用Thymeleaf進行Web開發時，通過th:href屬性可以為HTML標籤設定超鏈接。th:href的值可以是文字、變數或表達式等。
當值為文字時，th:href會把該文字指定為超鏈接的URL。當值為變數或表達式時，th:href先把該變數或表達式的返回值轉換為字元串，再作為超鏈接的URL。th:href可以在標籤中使用。
/* 值為文字 */
<a th:href="@{http://example.com}">Example
/* 值為變數 */
<a th:href="@{${item.url}}">Example
/* 值為表達式 */
<a th:href="@{${'/view/'+item.id}}">Example
二、th:href的URL處理
th:href支持相對路徑、絕對URL和上下文相對URL。
1. 相對路徑
相對路徑指的是超鏈接的URL相對於當前URL的位置。通常情況下，相對路徑比絕對URL更容易維護。th:href支持相對路徑的寫法。
/* 當前URL為http://example.com/shop/index.html */
<a th:href="@{'/shop/cart.html'}">My Cart /* 相對路徑 */
2. 絕對URL
絕對URL指的是包括URL協議在內的完整URL地址。例如，http://example.com/shop/cart.html。當使用絕對URL時，可以省略協議和主機名（例如：//example.com/shop/cart.html）。
<a th:href="@{'https://example.com/shop/cart.html'}">My Cart /* 完整URL */
<a th:href="@{'//example.com/shop/cart.html'}">My Cart /* 相對協議和主機名 */
3. 上下文相對URL
上下文相對URL指的是相對於Web應用程序的根目錄的相對URL。在應用程序中使用上下文相對URL可以避免因為更改URL造成的無法鏈接的問題。
<a th:href="@{'~/shop/cart.html'}">My Cart /* 上下文相對URL */
/* Controller代碼 */
@GetMapping("/index")
public ModelAndView index() {
ModelAndView mav = new ModelAndView("index");
mav.addObject("path","~/shop/cart.html");
return mav;
}
/* index.html中使用變數 */
<a th:href="@{${path}}">My Cart
三、th:href的數據綁定
可以使用變數或表達式作為th:href的值，這些值會被自動轉換為字元串，並作為超鏈接的URL。當使用變數時，需要使用${}來引用變數。當使用表達式時，需要使用#{…}來引用表達式。
1. 使用變數作為th:href
/* Controller代碼 */
@GetMapping("/index")
public ModelAndView index() {
ModelAndView mav = new ModelAndView("index");
User user = new User();
user.setId(1);
user.setName("Lucy");
mav.addObject("user",user);
return mav;
}
/* index.html中使用變數 */
<a th:href="@{'/user/'+${user.id}}">User Info
2. 使用表達式作為th:href
/* Controller代碼 */
@GetMapping("/index")
public ModelAndView index() {
ModelAndView mav = new ModelAndView("index");
User user = new User();
user.setId(1);
user.setName("Lucy");
mav.addObject("user",user);
return mav;
}
/* index.html中使用表達式 */
<a th:href="@{'/user/'+#{user.id}}">User Info
四、th:href的URL參數
th:href還可以添加URL參數，用於傳遞額外的信息。URL參數的格式是?key=value，多個參數之間用&分隔。
/* 當前URL為http://example.com/shop/index.html */
<a th:href="@{'/shop/cart.html'}">My Cart /* 無參數 */
<a th:href="@{'/shop/cart.html(orderId=${order.id})'}">My Cart /* 單參數 */
<a th:href="@{'/shop/cart.html(orderId=${order.id},qty=${item.qty})'}">My Cart /* 多參數 */
五、th:href的URL路徑格式化
有時候，URL路徑中需要替換某些字元。Thymeleaf提供了兩種方式來進行URL路徑格式化。
1. 使用’/’號進行格式化
/* Controller代碼 */
@GetMapping("/index")
public ModelAndView index() {
ModelAndView mav = new ModelAndView("index");
User user = new User();
user.setId(1);
user.setName("Lucy");
mav.addObject("user",user);
return mav;
}
/* index.html中使用'/'號進行格式化 */
<a th:href="@{/user/{id}(id=${user.id})}">User Info
2. 使用佔位符進行格式化
/* Controller代碼 */
@GetMapping("/index")
public ModelAndView index() {
ModelAndView mav = new ModelAndView("index");
User user = new User();
user.setId(1);
user.setName("Lucy");
mav.addObject("user",user);
return mav;
}
/* index.html中使用佔位符進行格式化 */
<a th:href="@{'/user/{id}/info.html'(id=${user.id})}">User Info
六、th:href的局部刷新
在開發Web應用時，可能需要使用Ajax技術實現局部刷新。Thymeleaf提供了th:href屬性中新的特性，它可以為超鏈接添加局部刷新的功能。
/* Controller代碼 */
@GetMapping("/index")
public ModelAndView index() {
ModelAndView mav = new ModelAndView("index");
User user = new User();
user.setId(1);
user.setName("Lucy");
mav.addObject("user",user);
return mav;
}
/* index.html中使用JS進行局部刷新 */
<a th:href="@{/user/{id}(id=${user.id})}"
th:attr="data-url=@{/user/info.ajax(id=${user.id})}"
onclick="loadData(this)">User Info
/* JavaScript代碼 */
function loadData(obj) {
var url = $(obj).data('url');
$.get(url,function (data) {
$('#user-info').html(data);
});
}
七、總結
通過本文的介紹，我們了解了th:href的概述、URL處理、數據綁定、URL參數、URL路徑格式化和局部刷新等特性。th:href是Web開發中必不可少的一個屬性，掌握它的使用有助於提高Web開發效率。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/308447.html
微信掃一掃 
支付寶掃一掃 