Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan fungsi menghantar parameter dan melompat halaman dalam halaman web menggunakan JavaScript
Bagaimana untuk melaksanakan fungsi menghantar parameter dan melompat halaman dalam halaman web menggunakan JavaScript
- PHPzasal
- 2023-04-25 18:19:541095semak imbas
Dengan perkembangan pesat Internet, semakin banyak halaman web perlu memindahkan maklumat dari satu halaman ke halaman yang lain. Kaedah tradisional ialah menggunakan permintaan GET atau POST, tetapi kaedah ini memerlukan sokongan bahagian pelayan dan tidak boleh terus melompat ke halaman. JavaScript melaksanakan pemindahan parameter halaman web dan melompat halaman tanpa sokongan pelayan dan boleh melompat terus ke halaman sasaran.
1. Dapatkan nilai parameter
Dalam JavaScript, anda boleh menghantar nilai parameter apabila melompat ke halaman melalui window.location.search. Contohnya, jika halaman index.html melompat ke halaman detail.html dan nilai parameter name=Tom diluluskan, anda boleh menggunakan kod berikut untuk mendapatkan nilai parameter yang diluluskan:
var search = window.location.search; alert(search); // ?name=Tom
Jika anda ingin mendapatkan nilai parameter tertentu, carian perlu diproses, anda boleh menggunakan ungkapan biasa atau kaedah pemintasan rentetan. Berikut ialah kod yang menggunakan ungkapan biasa untuk mendapatkan nilai parameter nama:
var search = window.location.search;
var reg = new RegExp("(^|&)name=([^&]*)(&|$)");
var result = search.substr(1).match(reg);
var name = result[2];
alert(name); // Tom
2. Lulus nilai parameter
Dalam JavaScript, anda boleh menggunakan window.location.href untuk mencapai halaman lompat, dan Lulus nilai parameter. Contohnya, untuk melompat dari halaman index.html ke halaman detail.html dan menghantar nilai parameter name=Tom, anda boleh menggunakan kod berikut:
var name = "Tom"; window.location.href = "detail.html?name=" + name;
3. Contoh lengkap
Berikut ialah Contoh lengkap yang menunjukkan cara menggunakan JavaScript untuk melaksanakan halaman lompat parameter halaman web:
halaman index.html:
<!DOCTYPE html>
<html>
<head>
<title>Index Page</title>
</head>
<body>
<h1>Index Page</h1>
<button onclick="gotoDetail()">Go to Detail Page</button>
<script type="text/javascript">
function gotoDetail() {
var name = "Tom";
window.location.href = "detail.html?name=" + name;
}
</script>
</body>
</html>
halaman detail.html:
<!DOCTYPE html>
<html>
<head>
<title>Detail Page</title>
</head>
<body>
<h1>Detail Page</h1>
<p id="name"></p>
<script type="text/javascript">
window.onload = function() {
var search = window.location.search;
var reg = new RegExp("(^|&)name=([^&]*)(&|$)");
var result = search.substr(1).match(reg);
var name = result[2];
document.getElementById("name").innerHTML = "Hello, " + name + "!";
}
</script>
</body>
</html>
Pada halaman index.html, terdapat butang Klik butang untuk melompat ke halaman detail.html, dan nama nilai parameter=Tom diluluskan. Pada halaman detail.html, dapatkan nilai parameter yang diluluskan melalui JavaScript dan paparkannya pada halaman.
Melalui contoh di atas, kita dapat melihat bahawa JavaScript sangat mudah untuk melaksanakan pemindahan parameter halaman web dan halaman lompat Tiada sekatan bahagian pelayan, dan fungsi lompat halaman dan pemindahan parameter boleh direalisasikan. Dalam pembangunan sebenar, lebih banyak pengembangan dan pengoptimuman boleh dijalankan mengikut keperluan anda sendiri.
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi menghantar parameter dan melompat halaman dalam halaman web menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!