Dalam pengembangan sistem otentikasi web Java, pelanggan memerlukan pembaruan data untuk memunculkan kotak prompt di halaman, sehingga staf di sebelahnya dapat segera mengetahui bahwa data baru telah diserahkan tepat waktu. Selain menggunakan teknologi push tepat waktu, kami juga dapat menggunakan AJAX untuk mengimplementasikan fungsi -fungsi ini.
Prinsip implementasi kode adalah untuk mengaktifkan eksekusi waktu permintaan AJAX yang tepat pada halaman. Jika data yang diperoleh berada di negara bagian terbaru, permintaan suara dan petunjuk kotak pop-up harus dieksekusi. Kerugian dari implementasi ini adalah bahwa database sering disebut, dan metode ini hanya cocok untuk sistem dengan lebih sedikit orang.
1. Tambahkan petunjuk suara
<audio id = "sound" autoplay = "autoplay">
Tambahkan kode file suara pemutaran secara dinamis:
document.geteLementById ("sound"). src = "<%= Basepath%> admin/media/global.wav";2. Kotak Prompt Pesan Pop-up Dinamis:
Di sini saya mengimpor jQuery.gritter.js dan jQuery.gritter.css, dan kode implementasi spesifik:
jQuery (document) .ready (function () {setInterval (function () {$ .post ('ajax/linecheck', function (data) {var json = eval ("("+data+")"); $. masing -masing (json, function (index, item) {$ ("#line"+item.id) .html ("") $. masing -masing (item.locallist, function (index, item2) {if (item2.Attendoclist! = "") {$ ("$ ("+. id = 'in "+item2.id+"'> <div class = 'avatar'> "+item2.location+" </div> <div class = 'pesan'> <ul id = li "+item2.id+"> </ul> </div> </li> ")} $. masing -masing (item2.attendoclist, function (index, item3) {if (item3.status == 0) {$ ("#li "+item2.id) .penpend (" <li class = 'user'> <span class = 'span'> <span '> <+<+span style = 'color: red;' class = 'UserName'> id: "+item3.card_id+" </span> </li> <hr> ");} else {$ ("#li "+item2.id). lappend (" <li class = 'user'> <span class = 'username'> "+item3.person_name+" </span> <span> <br> <br> color = 'color =' color; 'color; Use; Use. "+item3.today+" "+item3.times+" </span> <br> <span class = 'username'> tel: "+item3.person_phone+" </span> <br> <span class = 'username'> id: "+item3.card_id+" </span> </li> <hr> "); document.geteLementById (" sound "). src =" <%= Basepath%> admin/media/global.wav "; setTimeOut (function () {var unionpath = $ .ritter.add ({{{{{{{) (function () {var var union_id = $. item3.person_name+"("+item2.location+")", teks: "<span class = 'username'>"+item3.person_name+"</span> <br> <span style = 'color: red; class = 'username'> tel: "+item3.person_phone+" </span> <br> <span class = 'username'> id: "+item3.card_id+" </span> ", sticky: true, time: ', class_name:' my-sticky-class '}); setTimeout (function () {$ $. 'Slow'});}, 12000);}, 2000);}});});});});});});}, 2000); });Konten di atas adalah kode implementasi bahwa kotak prompt JS memunculkan pesan baru secara real time dan memiliki suara yang cepat. Saya harap ini akan membantu semua orang!