Bagaimana untuk melaksanakan fungsi menghantar parameter dan melompat halaman dalam halaman web menggunakan JavaScript

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:

nbsp;html>


  <title>Index Page</title>


  <h1 id="Index-Page">Index Page</h1>
  <button>Go to Detail Page</button>

  <script>
    function gotoDetail() {
      var name = "Tom";
      window.location.href = "detail.html?name=" + name;
    }
  </script>

halaman detail.html:

nbsp;html>


  <title>Detail Page</title>


  <h1 id="Detail-Page">Detail Page</h1>
  <p></p>

  <script>
    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>

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!