ในการพัฒนาระบบการตรวจสอบสิทธิ์เว็บ Java ลูกค้าต้องการการอัปเดตข้อมูลเพื่อปรากฏกล่องพร้อมท์บนหน้าเพื่อให้พนักงานถัดจากพวกเขาสามารถรู้ได้ทันทีว่ามีการส่งข้อมูลใหม่ในเวลาที่เหมาะสม นอกเหนือจากการใช้เทคโนโลยีการผลักดันในเวลาที่เหมาะสมเรายังสามารถใช้ AJAX เพื่อใช้ฟังก์ชั่นเหล่านี้
หลักการของการใช้รหัสคือการเปิดใช้งานการดำเนินการตามเวลาของคำขอ AJAX ในหน้า หากข้อมูลที่ได้รับอยู่ในสถานะล่าสุดจะต้องดำเนินการพร้อมกับการแจ้งเตือนด้วยเสียงและกล่องป๊อปอัพ ข้อเสียของการใช้งานนี้คือฐานข้อมูลถูกเรียกบ่อยครั้งและวิธีนี้เหมาะสำหรับระบบที่มีคนน้อยลงเท่านั้น
1. เพิ่มเสียงด้วยเสียง
<audio id = "sound" autoplay = "autoplay">
เพิ่มรหัสไฟล์เสียงการเล่นแบบไดนามิก:
document.getElementById ("sound"). src = "<%= basepath%> admin/media/global.wav";2. กล่องพรอมต์ข้อความป๊อปอัพแบบไดนามิก:
ที่นี่ฉันนำเข้า jQuery.gritter.js และ jQuery.gritter.css และรหัสการใช้งานเฉพาะ:
jQuery (เอกสาร) .ready (function () {setInterval (function () {$ .post ('Ajax/lineCheck', ฟังก์ชั่น (data) {var json = eval ("("+data+")"); $. แต่ละ (json, ฟังก์ชั่น (ดัชนี, รายการ) {$ ("#line"+item.id) .html ("") $. แต่ละ (item.locallist, ฟังก์ชั่น (ดัชนี, รายการ 2) {if (item2.attendoclist! = "") id = 'ใน "+item2.id+"'> <div class = 'avatar'> "+item2.location+" </div> <div class = 'ข้อความ' ><ul id = li "+item2.id+"> </ul> </div> </li> ")} $. แต่ละรายการ (item2.attendoclist, ฟังก์ชั่น (ดัชนี, รายการ 3) {ถ้า (item3.status == 0) {$ ("#li "+item2.id) style = 'สี: สีแดง;' class = 'ชื่อผู้ใช้'> เวลา: "+item3.today+" "item3.times+" </span> <br> <span class = 'ชื่อผู้ใช้'> โทรศัพท์: "+item3.person_phone+" </span> <br> class = 'username'> id: "+item3.card_id+" </span> </li> <hr> ");} else {$ ("#li "+item2.id) .append (" <li class = 'user'> <span class = 'username'> " "+item3.today+" "+item3.times+" </span> <br> <span class = 'ชื่อผู้ใช้'> โทรศัพท์: "+item3.person_phone+" </span> <br> <span class = 'username'> id: "+item3.card_id+" </span> </li> <hr> "); document.getElementById (" เสียง "). src =" <%= basepath%> admin/media/global.wav "; item3.person_name+"("+item2.location+")", ข้อความ: "<span class = 'ชื่อผู้ใช้'>"+item3.person_name+"</span> <br> <span style = 'สีแดง: class =' ผู้ใช้ '> เวลา:" class = 'username'> โทรศัพท์: "+item3.person_phone+" </span> <br> <span class = 'username'> id: "+item3.card_id+" </span> "sticky: true, time: ', class_name:' my-sticky-class '}); 'slow'});}, 12000);}, 2000);}});});});});});});}, 2000); -เนื้อหาข้างต้นคือรหัสการใช้งานที่กล่องพรอมต์ JS จะปรากฏข้อความใหม่แบบเรียลไทม์และมีเสียงที่รวดเร็ว ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!