22 Task 19 Determining Whether Username is Valid by Ajax When SignupPHP動(dòng)態(tài)網(wǎng)站開發(fā)項(xiàng)目教程課件

Project1MemberManagementSystemSchoolofSoftware,ChengduPolytechnicLecturer:MuQichunTask19DeterminingWhetherUsernameisValidbyAjaxWhenSignupTheProposedQuestionAuniqueusernameisrequiredwhensignup.Therefore,weshouldfirstquerywhetherthecurrentusernamehasbeenoccupiedinthedatabasebeforewritingitintothedatabase.Ifitisnotoccupied,continuetowriteitinthedatabase.Ifithasbeenoccupied,popupthepromptbox,andreturntothepreviouspagetorequiretheusertomodifytheusername.Basicallythereisnoproblem,buttheuserexperienceispoor.Thisisbecausewhenreturningtothefront-endpagefromthebackend,thepasswordfilledinthefront-endpageisemptied,andshouldbeenteredagain.If,afterenteringtheusername,thesystemcanautomaticallydeterminewhetherthecurrentusernameisvalidandgiveacorrespondingprompt,suchuserexperienceisverygood.ThespecificmethodistoentertheusernameintheAjaxasynchronousway,querywhethertheusernameinthedatabaseisvalid,andgiveaprompt.Theasynchronousoperationreferstodirectlyupdatingsomecontentsinthepagewithoutrefreshingthepage.WerecommendyoutousetheAjaxasynchronousoperationencapsulatedinjQuery.WhatIsjQuery?jQueryisaquickandsimpleJavaScriptframe,andreleasedbyJohnResiginJanuary2006.Itsdesigntenetis“writeLess,DoMore”,i.e.,advocatingwritinglesscodesanddoingmore.ItencapsulatesthefunctionalcodescommonlyusedinJavaScript,providesasimpleJavaScriptdesignmode,andoptimizesHTMLdocumentoperation,eventhandling,animationdesign,andAjaxinteraction.ThecorefeaturesofjQueryincludesuniquechaingrammarandshortandclearmultifunctioninterface;efficientandflexibleCCSselector,andextensionofCSSselector;andconvenientplug-inextensionmechanismandabundantplug-ins.jQueryiscompatibletomainstreambrowsers.Pleasereferto/jquery/index.aspforthecourseofjQuery.YoucandownloadthelatestversionsandhistoricalversionsofjQueryat/plugin/122.Certainly,youcanalsodirectlycitejQueryremotely,suchasBaiducompressedversion:/jquery/1.9.1/jquery.min.jsRelevantCodeBacktothesingup.phpfile.FirstcitethejQueryfile,andaddthefollowingcodebehindthefile:Next,modifytheusernameform.RelevantCodeWeaddanonblurevent,andperformJavaScriptmethodcheckUsername()whentheusernamecontrollosesthefocus.Inthismethod,theinterfaceiscalledinthebackendintheAjaxasynchronousmodetodeterminethecurrentuserisvalid.Behindthered*,wealsoaddatag“span”withusernameMsgasitsID,anditscontentsareaddedintheAjaxmethod,namely,displayingwhetherthecurrentusernameisvalid.Next,makeJavaScriptmethodcheckUsername(),withthecodeasbelow:RelevantCodeRelevantCodeStartingfromLine12,Ajaxconductstheasynchronouscommunicationtodeterminewhethertheusernameistheavailablecorecode.AjaxoperationencapsulatedbyjQuerycancarrymultipleparameters,andthespecificcontentisavailableat/jquery/ajax-ajax.html.Thefollowingparametersareusedinourprogram.url:Targetfileforasynchronousoperationandback-endcommunication.Weusethecheckusername.phpfileandwillmakeitlater.type:indicatinghowtheprogramsubmitsdata.Likeexpressionmethod,weuseposttosubmitdata.dataType:Thisparameterreferstotheformatreturnedwhensettingtheback-endprogramdata.WeuseJSONformattofacilitateparsingofthereturnedcontent.data:ParameterspassedfromthefrontendtothebackendareaddedintheformatofaJSONobject.Ourparameternameisusername,anditsvalueistheusernamefilledinbytheuserpreviouslyobtained.RelevantCodesuccess:callbackfunctionafterthesuccessfulexecutionofAjaxasynchronouscommunicationprogram.Theparameterdatainthefunctionisthedatareturnedfromthebackend.Aparametercodewillbereturnedintheback-endprogram.Ifthecurrentusernameisunavailable,thecodereturnedfromthebackendis0,otherwise,is2.InLine18,weconductajudgment.Ifthecodeis0,setthetextinthetag“span”withusernameMsgasitsIDasmsgreturnedfromthebackend,andmeanwhile,removecssclass“black”usingremoveClassmethod,andaddcssclass“green”usingaddClassmethod.Ifthecodeis2,removecssclass“green”,andaddcssclass“black”.Thecontentsofthesetwoclassesaresimple,i.e.,settingthecolorscorrespondingtothenameshavingthetextcolorofcss,withthecodeasbelow:RelevantCodeNext,createacheckUsername.phpfile,withthecodeasbelow:RelevantCodeThisistheback-endfileofAjaxcommunication,anditscontenthasabiggestdifferencefromthecommonphpfilesinthattheJSONformatisusedforalloutputs,andechoandotherwayscannotbedirectlyusedtooutputanycontent.Asthetypeusedinthefrontendispost,wereadtheparameterusernamepassedfromthefrontendusing$_POSTinLine3.InitializeinLine4,andcreateanemptyarray$a.InLine5,determinewhethertheuserfillsintheparameterusername.Ifnotfilledin,assignthearray$a,withtwosubscriptsused,i.e.,codeandmsg,whichareassociativearray;andassignthemrespectively.Hereweassign1tothecode,andweonlyjudge0and2,ratherthan1,inthefrontend.Youcanaddsomecodesinthefrontendtodeterminethesituationofreturning1inthebackend.Line10referstoqueryingthecurrentusernameinthedatatable.Thecolumnqueriedbehindselectisnotaspecificcolumninthedatatable,but1.Ifqueryisvalid,return1.Thisisbecauseweonlydeterminewhethertherearerecords,butnotconcernthecontentsreturnedafterquerying.Thereturnedcontentsarenotusedanywhere.Line12referstodeterminingthequantityofrowdataintheresultset.Ifitistrue,itindicatesitisnot0,namely,thequeryisvalid.SoinLine14,thecodeisassigned0,andmsgisassigned“Thisuserisnotavailable”inLine15.Otherwisethecodeisassigned2,andmsgisassigned“Thisuserisavailable”.Finally,usejson_encodefunctionin