溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細(xì)介紹“jquery如何實(shí)現(xiàn)頁面跳轉(zhuǎn)并傳值”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“jquery如何實(shí)現(xiàn)頁面跳轉(zhuǎn)并傳值”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。
一、jQuery頁面跳轉(zhuǎn)
在jQuery中，頁面跳轉(zhuǎn)可以通過下面的方式來實(shí)現(xiàn)：
$(location).attr('href', url);
其中，$(location)表示當(dāng)前URL，attr方法可以設(shè)置URL。url參數(shù)可以是一個(gè)相對路徑，也可以是一個(gè)完整的URL地址。比如：
// 相對路徑
$(location).attr('href', '/page2.html');
// 完整URL地址
$(location).attr('href', 'http://www.example.com/page2.html');
二、在頁面跳轉(zhuǎn)時(shí)傳遞參數(shù)
在實(shí)際應(yīng)用中，我們不僅要實(shí)現(xiàn)頁面跳轉(zhuǎn)，有時(shí)候還需要將當(dāng)前頁面的一些狀態(tài)或者參數(shù)傳遞到下一個(gè)頁面中，這時(shí)候可以通過URL參數(shù)的方式來實(shí)現(xiàn)。
在jQuery中，可以通過下面的方式來獲取當(dāng)前頁面的URL：
var url = window.location.href;
這個(gè)url變量中就包含了當(dāng)前頁面的完整地址。在跳轉(zhuǎn)到下一個(gè)頁面時(shí)，我們可以在URL中添加一些參數(shù)。添加參數(shù)的格式如下：
http://www.example.com/page2.html?param1=value1¶m2=value2
其中，?后面跟著的是參數(shù)列表，參數(shù)之間用&分隔。每個(gè)參數(shù)的格式都是參數(shù)名=值。比如：
http://www.example.com/page2.html?user=john&age=30
在跳轉(zhuǎn)到下一個(gè)頁面時(shí)，可以通過URL參數(shù)的方式來傳遞參數(shù)，代碼如下：
$(location).attr('href', '/page2.html?user=john&age=30');
在下一個(gè)頁面中，可以通過下面的方式來獲取傳遞過來的參數(shù)：
var user = getUrlParameter('user');
var age = getUrlParameter('age');
其中，getUrlParameter是一個(gè)自定義的函數(shù)，具體實(shí)現(xiàn)如下：
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
這個(gè)函數(shù)的作用是從URL參數(shù)列表中獲取指定的參數(shù)值。如果找到了指定的參數(shù)，則返回它的值；否則返回空字符串。
三、使用jQuery實(shí)現(xiàn)頁面跳轉(zhuǎn)并傳遞參數(shù)的完整代碼
下面是一個(gè)完整的例子，它演示了如何在jQuery中實(shí)現(xiàn)頁面跳轉(zhuǎn)并傳遞參數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery頁面跳轉(zhuǎn)并傳遞參數(shù)</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function gotoPage2(name, age, gender) {
// 構(gòu)造URL參數(shù)
var params = '?name=' + name + '&age=' + age + '&gender=' + gender;
// 跳轉(zhuǎn)到page2.html并傳遞參數(shù)
$(location).attr('href', 'page2.html' + params);
}
</script>
</head>
<body>
<div>
<h4>頁面一</h4>
<button onclick="gotoPage2('Tom', '30', 'man')">跳轉(zhuǎn)到頁面二</button>
</div>
</body>
</html>
在上面的代碼中，我們在頁面一中添加了一個(gè)按鈕，點(diǎn)擊這個(gè)按鈕就會(huì)跳轉(zhuǎn)到頁面二。在跳轉(zhuǎn)到頁面二的同時(shí)，我們將三個(gè)參數(shù)（名字、年齡、性別）以URL參數(shù)的形式傳遞給了頁面二。在頁面二中，可以通過getUrlParameter函數(shù)來獲取這三個(gè)參數(shù)的值，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>頁面二</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// 獲取從頁面一傳遞過來的參數(shù)
var name = getUrlParameter('name');
var age = getUrlParameter('age');
var gender = getUrlParameter('gender');
// 顯示參數(shù)的值
$('#name').text(name);
$('#age').text(age);
$('#gender').text(gender);
});
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
</script>
</head>
<body>
<div>
<h4>頁面二</h4>
<p>名字： <span id="name"></span></p>
<p>年齡： <span id="age"></span></p>
<p>性別： <span id="gender"></span></p>
</div>
</body>
</html>
在上面的代碼中，我們通過$(document).ready方法來初始化頁面，在這個(gè)方法中調(diào)用getUrlParameter函數(shù)來獲取參數(shù)的值，并將其顯示在頁面中。
讀到這里，這篇“jquery如何實(shí)現(xiàn)頁面跳轉(zhuǎn)并傳值”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
