23 Task 20 Application of beforeSendPHP动态网站开发项目教程课件

Project1MemberManagementSystemSchoolofSoftware,ChengduPolytechnicLecturer:MuQichunTask20ApplicationofbeforeSendTheProposedQuestionTheadoptionofAjaxasynchronouswaybearsobviousadvantages.Underthesituationofnotrefreshingthepage,thepagecouldbeupdateddirectlyandtheuserenjoysbetterexperience.However,sinceit’snotsynchronousoperation,theupdateisdelayedfortheslowspeedofnetwork,suchexperiencewouldbedeclined.Tosolvethisproblem,wecouldusebeforeSendtocallback.Whenissuingtherequest,displaytheiconLoading,giveaclearhinttotheuser,soastocreateabetterexperience.Comparedwiththoseinthepast,computersandnetworkhardwareconstructionhavebeenmuchbetter.However,inrecentyears,USAiscontinuouslydepressingChinainthebusinessofchip.FromthepunishmentonZTEandthebanningonHuawei,thepainofchiplackhasfallenontheheartofeveryChinesepeople.WhenChinaislackofchips,USAcomestoblockwithchipbans.WhenChinahasovercomethelackofchips,USAcomestostopwithmanufactureofchips.WhenChinahasfiguredoutawayinchipmanufacturing,USAwillcometoblockthewaywithmanufacturingofequipment,materialsandsoftware.Therefore,gettingoutofthetroubleofchiplack,Chinaisdemandingoncourageandrationality.SinceUSAisdepressingChinawithchips,thisisachanceforChinesepeopletopaddleitsowncanoe.EveryChinesemanshouldstrivehardfortheriseofChinesenation.ApplicationofBeforeSendWhenlosingthefocusoftheinputframeofusername,executetheAjaxprogram,tomaketherequestonthebackend.Aftertheback-endprogramhasbeenexecutedandtheresulthasbeensent,thefront-endpagewillexecutethecorrespondingupdating.WhenusingAjaxofjQuery,wecouldhandleinthethreecallbacks:complete,success,anderror.Thatis,aftertheexecutionofback-endprogramisfinishedandtheresultissentbacktothefrontend,thecallbackofcompletewilldefinitelybeexecuted.Iftheexecutionissuccessful,thecallbackofsuccesswillbeexecuted.Ifnot,thecallbackoferrorwillbeexecuted.Beforetherequestismade,call-backofbeforeSendwillbeexecuted.Therefore,wecoulddisplaytheiconLoadinginbeforeSend,andhideitincomplete,success,anderror.RelevantCodeFirst,downloadadynamiciconloading.gifontheinternetandputitintotheproject.Thenmodifythecodeintheusernameinputframe:Addapictureaftertheusername,i.e.thedownloadedloading.gif,andadditsIDasloading.It’sobviousthat,normallythisanimatedicondoesnotshowup.Therefore,weaddincssthat:1.#loading{2.display:none3.}Setthesizeoftheanimatediconas80pxandconductthehidingdisplay.WhenusingAjaxforcommunication,thisanimatediconwillbedisplayedduringthecallbackofbeforeSendandhiddenagainincomplete.RelevantCodeThecommunicationcodeoftherevisedajaxisasfollows:RelevantCodeInLine6,weusethecallbackofbeforeSend,todeletethepromptmessageanddisplaytheanimatedicon.InLine11andLine26,thecodetohidetheanimatediconisadded.Withcomplete,theone-timeaddingof$("#loading").hide();isenough.Duetothesimplecontent,thisback-endrequestnormallytakeslittletimeandtheanimationeffectisnotveryobvious.Totestthiseffect,intheback-endfile,addanlatencyprogrambeforejson_encode,suchassleep(3);tomeanthepausingof3seconds.Therefore,therotationforawhileoftheanimatediconisseeninthefrontend,meaningtheback-endrequestisundergoing.Whentherequestissuccessful(orfails),theanimated