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.

1. Reka bentuk halaman hadapan

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 <input> untuk mentakrifkan kotak input dan butang, dan kemudian menggunakan teg <form> 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 <label> ditambahkan untuk menggesa pengguna memasukkan item.

2. JavaScript mengendalikan penyerahan borang

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.

3. Penyerahan Data

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.

4. Kesimpulan

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!