Rumah > Artikel > hujung hadapan web > Pelaksanaan javascript tetingkap log masuk
Pelaksanaan tetingkap log masuk menggunakan JavaScript
Dalam operasi log masuk laman web harian, pengguna perlu memasukkan nombor akaun dan kata laluan mereka, dan kemudian klik butang "Log Masuk" untuk melengkapkan operasi log masuk. Operasi log masuk ini memerlukan kerjasama halaman hadapan dan perkhidmatan hujung belakang untuk diselesaikan. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan tetingkap log masuk mudah.
Kita perlu mereka bentuk tetingkap log masuk dalam html terlebih dahulu. Tetingkap log masuk yang paling mudah ialah borang, yang mengandungi dua kotak input (akaun dan kata laluan) dan butang hantar (log masuk). Kita boleh menggunakan teg d5fd7aea971a85678ba271703566ebfd
untuk mentakrifkan kotak input dan butang, dan kemudian menggunakan teg ff9c23ada1bcecdd1a0fb5d5a0f18437
untuk mentakrifkan borang. Kodnya adalah seperti berikut:
<form> <label>账号</label> <input type="text" name="username" required /> <label>密码</label> <input type="password" name="password" required /> <button type="submit">登录</button> </form>
Borang ini mengandungi dua kotak input, iaitu username
dan password
. Pada masa yang sama, atribut required
juga ditentukan untuk memastikan mesti ada nilai dalam kotak input. Untuk menjadikan pengantarabangsaan lebih mesra pengguna dan memberitahu pengguna apa yang mereka perlu masukkan, teg 2e1cf0710519d5598b1f0f14c36ba674
ditambahkan untuk menggesa pengguna memasukkan item.
Selepas pengguna memasukkan akaun dan kata laluan dalam borang di atas, mereka perlu mengklik butang "Log Masuk" untuk melengkapkan operasi penyerahan. Pada masa ini kita perlu menulis kod JavaScript untuk mendengar peristiwa penyerahan borang dan memproses logik berkaitan. Kodnya adalah seperti berikut:
var form = document.querySelector('form'); form.addEventListener('submit', function(event) { event.preventDefault(); var username = form.elements['username'].value; var password = form.elements['password'].value; if (username === 'admin' && password === 'admin') { alert('登录成功'); } else { alert('账号或密码错误'); } });
mendapatkan elemen DOM borang melalui kaedah document.querySelector
, dan kemudian menggunakan kaedah addEventListener
untuk menyediakan fungsi panggil balik untuk acara penyerahan borang. Fungsi panggil balik ini akan dicetuskan apabila butang "Log Masuk" diklik. Parameter event
mewakili maklumat berkaitan peristiwa Menggunakan kaedah event.preventDefault
boleh menghalang kelakuan lalai, iaitu, operasi penyerahan borang.
Kemudian, gunakan atribut elements
elemen borang untuk mendapatkan nilai dalam kotak input untuk menentukan sama ada kata laluan akaun memenuhi keperluan. Jika keperluan dipenuhi, gunakan fungsi alert
untuk menggesa pengguna berjaya log masuk jika tidak, gesa pengguna bahawa akaun pengguna atau kata laluan tidak betul.
Dalam operasi log masuk sebenar, nombor akaun dan kata laluan yang dimasukkan oleh pengguna perlu diserahkan kepada perkhidmatan bahagian belakang untuk pengesahan. Dalam JavaScript, anda boleh menggunakan objek XMLHttpRequest
untuk melaksanakan permintaan AJAX untuk mencapai tujuan ini.
Kodnya adalah seperti berikut:
var form = document.querySelector('form'); form.addEventListener('submit', function(event) { event.preventDefault(); var username = form.elements['username'].value; var password = form.elements['password'].value; var xhr = new XMLHttpRequest(); xhr.open('POST', '/login'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); if (response.code === 0) { alert('登录成功'); } else { alert(response.message); } } }; xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password)); });
Antaranya, objek XMLHttpRequest
digunakan untuk menghantar permintaan HTTP tak segerak. Kami menggunakan permintaan POST untuk menghantar nama pengguna dan kata laluan ke perkhidmatan hujung belakang sebagai kandungan kandungan permintaan. Kaedah setRequestHeader
digunakan untuk menetapkan pengepala permintaan; kaedah onreadystatechange
digunakan untuk memantau perubahan dalam status permintaan dan melaksanakan fungsi panggil balik. Apabila permintaan berjaya dan hasil pulangan tidak kosong, huraikan hasilnya dan tentukan sama ada log masuk berjaya berdasarkan nilai pulangan.
Melalui langkah di atas, kami melaksanakan tetingkap log masuk mudah dan menggunakan kod JavaScript untuk mengendalikan penyerahan borang dan fungsi penyerahan data. Proses pelaksanaan ini juga menunjukkan sintaks asas dan operasi DOM JavaScript, dan juga memperkenalkan penggunaan asas permintaan AJAX. Walaupun pelaksanaan sedemikian adalah mudah, ia adalah asas kepada projek sebenar Atas dasar ini, fungsi log masuk boleh dikembangkan lagi mengikut keperluan sebenar.
Atas ialah kandungan terperinci Pelaksanaan javascript tetingkap log masuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!