При разработке системы веб -аутентификации Java клиенты требуют, чтобы обновления данных высказывали на странице подставку, чтобы сотрудники рядом с ними могли быстро знать, что новые данные были представлены своевременно. В дополнение к использованию технологии своевременного push, мы также можем использовать 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 (document) .ready (function () {setInterval (function () {$ .post ('ajax/linecheck', function (data) {var json = eval ("("+data+")"); $. Каждый (json, function (index, item) {$ ("#line"+item.id) .html ("") $. Каждый (item.locallist, function (index, item2) {if (item2.attendoclist! id = 'in "+item2.id+"'> <div class = 'avatar'> "+item2.location+" </div> <div class = 'message'> <ul id = li "+item2.id+"> </ul> </div> </li> ")} $. Каждый (item2.attendoclist, function (index, item3) {if (item3.status == 0) {$ ("#li "+item2.id) .append (" <li class = 'user'> <span = 'unsemaname'> item3.person_name+"</branse -span>" <//bran </stransem. style = 'color: red;' class = 'username'> time: "+item3.today+" "+item3.times+" class = 'username'> id: "+item3.card_id+" </span> </li> <hr> ");} else {$ ("#li "+item2.id) .append (" <li class = 'user'> <span class = 'username'> "+item3.person_name+" </span> <br> <pran style = 'color:' class 'us; "+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 "; settime (function () {var in ancial = $. item3.person_name+"("+item2.location+")", текст: "<span class = 'username'>"+item3.person_name+"</span> <br> <span style = 'color: red;' class = 'usernam class = 'username'> tel: "+item3.person_phone+" </span> <br> <span class = 'username'> id: "+item3.card_id+" </span> ", липкий: true, time: '', class_name: 'my-spky-class'}); settimeout (function () {$. 'Slow'});}, 12000);}, 2000);}});});});});});});}, 2000); });Приведенный выше контент - это код реализации, который в режиме реального времени появляется новое сообщение и имеет быстрый звук. Я надеюсь, что это будет полезно для всех!