jquery melaksanakan lompat log masuk halaman lompat halaman lompat

Dalam pembangunan web, keperluan yang sangat biasa adalah untuk pengguna melompat ke halaman yang berbeza selepas menyelesaikan operasi log masuk dengan memasukkan nombor akaun dan kata laluan mereka. Proses ini memerlukan penggunaan jQuery yang sangat popular dalam perpustakaan Javascript.

jQuery ialah perpustakaan JavaScript yang pantas dan ringkas yang direka bentuk dengan falsafah "kurang tulis, buat lebih banyak". Ia merangkumi operasi yang biasa digunakan dalam JavaScript, membolehkan pembangun menyelesaikan pembangunan web dengan lebih mudah dan cepat.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery untuk melaksanakan lompat halaman selepas log masuk pengguna.

1. Tentukan borang log masuk

Pertama, kita perlu mentakrifkan borang dalam HTML yang mengandungi kotak input nama pengguna dan kata laluan serta butang hantar, seperti yang ditunjukkan di bawah:

<form id="login-form">
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>
  </div>
  <button type="submit">登录</button>
</form>

Dalam kod, kami menggunakan atribut yang diperlukan dalam HTML5 untuk memaksa pengguna mengisi nama pengguna dan kata laluan mereka.

2. Ikat acara penyerahan borang

Seterusnya, kita perlu menggunakan jQuery untuk mengikat acara penyerahan borang. Kami boleh menggunakan kaedah $(document).ready(function(){}) untuk mengikat peristiwa apabila dokumen dimuatkan, seperti yang ditunjukkan di bawah:

$(document).ready(function(){
  $("#login-form").submit(function(event){
    // 阻止表单默认提交行为
    event.preventDefault();

    // 获取用户名和密码
    var username = $("#username").val();
    var password = $("#password").val();

    // TODO: 验证用户名和密码

    // 跳转到指定页面
    window.location.href = "https://www.example.com/dashboard";
  });
});

Dalam kod, kami menggunakan $("# log masuk jQuery -form") kaedah memilih elemen borang dan menggunakan kaedah .submit() untuk mengikat acara serah. Dalam fungsi pengendali acara, kami menggunakan kaedah event.preventDefault() untuk menghalang gelagat penyerahan lalai borang.

Seterusnya, kami mendapat nama pengguna dan kata laluan daripada kotak input melalui kaedah $.val(), dan boleh melakukan pengesahan nama pengguna dan kata laluan mengikut keperluan. Selepas lulus pengesahan, kami boleh menggunakan harta window.location.href untuk melompat ke halaman yang ditentukan.

3. Lompat ke halaman yang ditentukan

Dalam kod, kami menggunakan atribut window.location.href untuk melompat ke halaman yang ditentukan. Atribut ini boleh mendapatkan atau menetapkan URL halaman semasa Anda boleh menggunakan pernyataan seperti window.location.href = "url_anda" untuk melompat ke halaman.

Dalam kod kami, kami akan melompat ke halaman "https://www.example.com/dashboard". Sudah tentu, dalam pembangunan sebenar, anda perlu menggantikannya dengan sasaran lompatan anda sendiri.

4. Permintaan tak segerak untuk melaksanakan log masuk dan lompat

Dalam kod di atas, selepas pengguna mengklik butang log masuk, halaman akan diubah hala ke URL yang ditentukan. Walau bagaimanapun, pendekatan ini mempunyai beberapa kelemahan. Sebagai contoh, pengguna mungkin menghadapi beberapa kelewatan semasa pengesahan kata laluan. Ini merendahkan pengalaman pengguna, jadi cara yang lebih baik ialah menggunakan AJAX untuk melaksanakan log masuk dan lompat tak segerak.

Untuk melaksanakan permintaan tak segerak untuk log masuk dan lompat, kami boleh mengubah suai kod di atas seperti berikut:

$(document).ready(function(){
  $("#login-form").submit(function(event){
    // 阻止表单默认提交行为
    event.preventDefault();

    // 获取用户名和密码
    var username = $("#username").val();
    var password = $("#password").val();

    // 发起AJAX请求
    $.ajax({
      type: "POST",
      url: "/login",
      data: {username: username, password: password},
      success: function(data){
        // 登陆成功，跳转到指定页面
        window.location.href = "https://www.example.com/dashboard";
      },
      error: function(){
        // 登录失败
        alert('用户名或密码不正确！');
      }
    });
  });
});

Dalam kod di atas, kami menggunakan kaedah ajax() jQuery untuk memulakan asynchronous permintaan. Dengan menetapkan parameter seperti jenis, url dan data, kami boleh menghantar permintaan ke URL yang ditentukan. Apabila pelayan mengembalikan respons yang berjaya, kami menggunakan kaedah success() untuk melompat ke halaman Jika log masuk gagal, tetingkap ralat muncul melalui ralat.

Ringkasan

Artikel ini memperkenalkan cara menggunakan jQuery untuk log masuk dan melompat ke halaman tertentu, termasuk peristiwa penyerahan borang yang mengikat, mendapatkan nama pengguna dan kata laluan, mengesahkan identiti pengguna dan lompatan halaman . Kami juga memperkenalkan kaedah menggunakan AJAX untuk melaksanakan lompat log masuk permintaan tak segerak. Teknologi ini membolehkan kami mengendalikan log masuk pengguna dan lompat halaman dengan lebih baik.

Atas ialah kandungan terperinci jquery melaksanakan lompat log masuk halaman lompat halaman lompat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!