38 Task 13 Asynchronous VotingPHP动态网站开发项目教程课件

Project2OnlineVotingSystemSchoolofSoftware,ChengduPolytechnicLecturer:MuQichunTask13AsynchronousVotingProgrammingInthepreviouscode,whenwesuccessfullyvote,wewillrefreshthehomepagetodisplaythelatestvotes.Ifthepageislongandwehavescrolledthescreenseveraltimes,whenwesuccessfullyvoteandrefreshthepage,wemaynotfindthepicture,anditisnoteasytoknowthecurrentvotes.Thisisthedrawbackofthe"synchronization"approach.Basedonthepreviousstudy,wealreadyknowthattheuseofasynchronousmodewillgreatlyenhancetheuserexperienceinwebpages.Therefore,wewillchangethevotingprocesscompletedearliertoasynchronousmode.Inordertoupdatethelatestvotesofavehicledirectlywithoutrefreshingthepage,weneedtoaddauniqueIDtoeachtextshowingthevotes.ThevalueofthisIDcanbeupdatedbytheuseof“jQuery”sothatthelatestvotesofavehiclecanbeupdated,thusrealizingasynchronousupdatingofvotes.Enterindex.phpandmodifytherelevantcodeforvehiclevotes:ProgrammingWeadda“span”tagandanIDtothevehiclevotes,andtheIDisthecombinationofthecharacter“num”andthevehicleID,sothatthevoteIDofeachvehicleisnotduplicated.Next,weentertheshowCode.phpfileandchangethevotingmodetoasynchronousvoting.Next,wemodifytheform,removethe“form”tag,changethe"Submit"buttontoanormalbutton,andthenbindtheEventofClick.ProgrammingNext,addthea“postCode”of“JavaScript”method:ProgrammingCreatethecontentof“ajaxVote.php”.ThroughtheasynchronousoperationofProject1,wealreadyknowtheproductionmethodofasynchronousoperationbackendfile.Infact,themostcriticalstepisthatwecan'tdirectlyreturnthecontent.Accordingtooursettings,weshouldreturnvariousdatain“JSON”format.InaPHPfile,allyouneedtodoistoJSONencodethearray,andthenoutputitin“JSON”format.ThefollowingisthecompletecontentoftheajaxVote.phpfile:ProgrammingProgrammingProgrammingSpecificcode<pclass="text-center">Currentnumberofvotes:<spanid="num<?phpecho$info['id'];?>"><?phpecho$info['carNum'];?></span></p>AddauniqueIDtothecurrentvote.$("#postVote").click(function(){$.ajax({url:'ajaxVote.php',data:{id:id,code:$("#code").val().trim()},dataType:'json',type:'GET',success:function(d){if(d.error==1){//Itindicatesanerrorlayer.alert(d.errMsg,{icon:2},function(index){layer.closeAll();});}else{letnum=parseInt($("#num"+id).text());$("#num"+id).text(num+1);layer.alert('Votesuccessfully',{icon:1},function(index){UsethejQuery-encapsulated“ajax”forasynchronousrequests.layer.closeAll();});}},error:function(){layer.alert(d.errMsg,{icon:3},function(index){layer.closeAll();});}})})Specificcode$a['error']=1;$a['errMsg']=‘Theremustbeanintervalofaminutebetweentwovotes.';echojson_encode($a);exit;Code-behindmodificationismainlytooutputallcontentsthroughthe“json_encode”.SummaryInthislecture,weuseanasynchronousvoting,wherethe