Gunakan jquery untuk melaksanakan log masuk tersuai

Gunakan jQuery untuk melaksanakan log masuk tersuai

Dengan pembangunan aplikasi web yang berterusan, semakin banyak tapak web dan aplikasi memerlukan pengguna log masuk untuk mengakses semua fungsi mereka. Selepas bertahun-tahun pembangunan, log masuk tersuai telah menjadi cara yang paling asas dan biasa, dan jQuery telah menjadi salah satu alat popular untuk mencapai fungsi ini.

Artikel ini akan memperkenalkan cara menggunakan jQuery untuk melaksanakan log masuk tersuai, termasuk aspek berikut:

• Proses pelaksanaan
• Struktur HTML
• CSS style
• kod jQuery

Proses pelaksanaan

Sebelum memulakan pelaksanaan, anda perlu memahami proses pelaksanaan. Secara umumnya, proses pelaksanaan log masuk tersuai adalah seperti berikut:

• Tulis struktur HTML
• Tulis gaya CSS
• Tulis kod jQuery
• Tambah pengguna Nama pengguna dan kata laluan yang dimasukkan dihantar ke pelayan untuk pengesahan
• Jika pengesahan berjaya, log masuk berjaya, jika tidak mesej ralat digesa

Artikel ini memfokuskan terutamanya pada tiga langkah pertama, dan dua langkah terakhir melibatkan program bahagian pelayan Operasi yang berkaitan dengan pangkalan data tidak akan diterangkan di sini.

Struktur HTML

Mula-mula anda perlu menulis struktur HTML. Borang log masuk biasanya mengandungi nama pengguna, kata laluan dan butang log masuk, dan boleh menggunakan struktur berikut:

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

Perlu diingatkan bahawa teg input nama pengguna dan kata laluan mesti menetapkan atribut required untuk memastikan pengguna mesti mengisi dua medan ini dan nama medan mesti dinyatakan menggunakan atribut name, yang akan digunakan kemudian.

Gaya CSS

Seterusnya, anda perlu menulis gaya CSS untuk memastikan paparan dan gaya borang log masuk. Hanya gaya rujukan disediakan di sini:

#login-form {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#login-form h2 {
  text-align: center;
}

#login-form form {
  display: flex;
  flex-direction: column;
}

#login-form label {
  margin-top: 10px;
}

#login-form input[type="text"],
#login-form input[type="password"] {
  height: 30px;
  padding: 5px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

#login-form button[type="submit"] {
  margin-top: 20px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: #007bff;
  color: #fff;
  cursor: pointer;
}

#login-form button[type="submit"]:hover {
  background: #0062cc;
}

Gaya ini agak mudah dan hanya perlu memastikan susun atur dan gaya borang log masuk.

Kod jQuery

Akhir sekali, anda perlu menulis kod jQuery untuk melaksanakan fungsi berikut:

• Dengar acara penyerahan borang
• Dapatkan input pengguna daripada Nama pengguna dan kata laluan
• Sahkan nama pengguna dan kata laluan
• Mesej ralat segera atau mesej kejayaan log masuk

Berikut ialah kod pelaksanaan :

$(document).ready(function() {
  $('#login-form form').on('submit', function(e) {
    e.preventDefault(); // 阻止表单提交事件
    var username = $(this).find('input[name="username"]').val(); // 获取用户名
    var password = $(this).find('input[name="password"]').val(); // 获取密码
    $.ajax({
      type: 'POST',
      url: 'login.php', // 处理登录请求的服务器端程序
      data: { // 向服务器发送的数据
        username: username,
        password: password
      },
      success: function(res) { // 登录成功，刷新页面或跳转到其他页面
        alert('登录成功！');
        location.reload();
      },
      error: function(xhr, status, err) { // 登录失败，提示错误信息
        alert('登录失败：' + err);
      }
    });
  });
});

Perlu diingatkan bahawa , apabila menghantar permintaan, nama pengguna dan kata laluan perlu dihantar ke program bahagian pelayan dalam bentuk objek, dan program bahagian pelayan perlu dapat untuk menerima dua maklumat ini dan mengesahkannya. Jika pengesahan berjaya, maklumat kejayaan log masuk dihantar kepada pelanggan, jika tidak, maklumat kegagalan log masuk dihantar kepada pelanggan.

Setakat ini, proses asas menggunakan jQuery untuk melaksanakan log masuk tersuai telah diperkenalkan. Perlu diingatkan bahawa ini hanya memberikan contoh mudah Dalam aplikasi sebenar, lebih banyak isu keselamatan perlu dipertimbangkan, seperti penyulitan kata laluan.

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