Java Web認証システムの開発では、顧客はページ上にプロンプトボックスをポップアップするためにデータの更新を必要とします。そのため、隣のスタッフは新しいデータがタイムリーに提出されたことを迅速に知ることができます。タイムリーなプッシュテクノロジーの使用に加えて、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（ ""）$。$。$。 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 "+</> </> </> </> </> </> </> </> </> </> </> </> </> </> style = 'color：red;' class = 'username'> time： "+ited3.today+" </span> <br> <span class = 'username'> tel： "+item3.person_phone+" </span> <br> <span class = 'username'> id： "+item3.card_id+" </span> </li> <hr> "）;} else {$（"＃li "+item2.id）.append（" <li class = 'user'> <span class = 'username'> "+item3.person_name+" </span <spanスタイル= 'color：' color： 'color：' color： 'color：' color： 'coler = "+iter3.today+" "+item.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％> admis/media/globa.wav "; sitimeout（function（）{var siquid_id = $ .gritter.add（{pitres item33.person_name+"（"+item2.location+"）、" <span class = 'username'> "+itern.person_name+" </span> <br> <span style = 'color：red;' class = 'username'> tel： "+item3.person_phone+" </span> <br> <span class = 'username'> id： "+item33.card_id+" </span> "、sticky：true、time： ''、class_name： 'my-sticky-class'}）; setimeout（）{$。 'slow'}）;}、12000）;}、2000）;}}）;}）;}）;} }）;上記のコンテンツは、JSプロンプトボックスがリアルタイムで新しいメッセージをポップアップし、プロンプトサウンドを備えた実装コードです。私はそれが誰にでも役立つことを願っています！