PHP网站制作之yii_wiki_394_javascript-and-ajax-wit... - 仓酷云

/***http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yiiJavascriptandAJAXwithYiitranslatedbyphp工程师http://blog.csdn.net/phpgcs1.OfficialJSwrappers1.1Formvalidation1.2CGridView1.3CJui*classes1.4PartialupdatewithAJAXandCHtml1.5ExtensionsthatwrapJSintoPHPclasses2.WritingcustomJScode2.1RequiringsomeJSlibraries(jQueryandsuch)2.2InlineJS(embeddedintheHTMLpage)2.3JSinanexternalfile2.5Inlinecodeorexternalfile?3.Finalwords****/这篇文档要给出一个完全周全的教程，关于怎样在Yii中利用JS。并非要讲怎样用JS编程，而是怎样用Yii的体例。。。第一部分先容几个例子关于Yii中埋没JS的。第二部分先容怎样写自界说的JS。1，官方JSwrappers即便开辟者没有明白请求利用JS，Yii也常常会这么干。Yii选择JQuery作为JS库，跟着分歧Yii版本的刊行，响应会刊行对照新的JQuery库。不倡议年夜伙自行加载别的的JQuery库，很有大概会招致抵触。1.1表单考证Formvalidation这类情形下，JS几近完整是埋没的。（只管从Yii1.1.11版本以后JS默许是禁用的）有2种考证利用了JS：client-sidevalidation,AJAXvalidation.1.2CGridView默许的，脚手架gii创立包容了CGridView的admin页面和包括了CListView的Index页面。奇异的是，CGridView和CListView默许利用Ajax。假如你必要定制，在API中有几个参数。默许地利用AJAX有pros和cons。跟默许举动最次要的争议是用户actions不会在扫瞄器扫瞄汗青中呈现：如，用户没法前往到之前的searchfilter。假如这个弊端让你想要在CGridView中禁用AJAX的话，你能够在初始化CGridViewwidget时用ajaxUpdate=>false.1.3CJui*classes在Yii中利用JS最复杂的举措就是利用Yiiclasses。Jui插件已被包括在PHP类中了。你能够参照这些类的列表。每个文档页面都是从一个例子入手下手的。CJuiWidgetzii.widgets.juiCJuiAccordionCJuiAccordiondisplaysanaccordionwidget.CJuiAutoCompleteCJuiAutoCompletedisplaysanautocompletefield.CJuiButtonCJuiButtondisplaysabuttonwidget.CJuiDatePickerCJuiDatePickerdisplaysadatepicker.CJuiDialogCJuiDialogdisplaysadialogwidget.CJuiDraggableCJuiDraggabledisplaysadraggablewidget.CJuiDroppableCJuiDroppabledisplaysadroppablewidget.CJuiInputWidgetCJuiInputWidgetisthebaseclassforJUIwidgetsthatcancollectuserinput.CJuiProgressBarCJuiProgressBardisplaysaprogressbarwidget.CJuiResizableCJuiResizabledisplaysaresizablewidget.CJuiSelectableCJuiSelectabledisplaysanaccordionwidget.CJuiSliderCJuiSliderdisplaysaslider.CJuiSliderInputCJuiSliderInputdisplaysaslider.Itcanbeusedinformsandpostitsvalue.CJuiSortableCJuiSortablemakesselectedelementssortablebydraggingwiththemouse.CJuiTabsCJuiTabsdisplaysatabswidget.在Yii的webwidgets中也有几个JS类，出格是CTreeView。1.3.1向一个PHPclass传送JS代码。(以CJuiAutoComplete为例)在良多时分，利用CJui类的基础例子是不敷的。我们常常还必要自界说JS举措。拿CJuiAutoComplete来讲，我们必要定制一个实例有以下2个特征：A，主动完成的备选项都是经由过程AJAX异步失掉的,B，被选中的项目标id会被增加到form中。AJAXsource和Yiihtmlform的静态更新CJuiAutoComplete的设置是一个联系关系数组。它的“source”主键必需跟AJAX联系关系，意味着它的value必需是一个JSfunction我们不成以复杂的如许写“function()..”由于这会被注释实行为一个stringvalue！准确的语法是："js:fucntion(request,response){...}"这个“js：“前缀告知yii前面的都是纯JS代码，应当跳过。更新form的准绳跟这个是一样的：fromwithinPHP,wepassaJSfunctionthatwillreadtheitemchosen.在这里，语法是：select=>"js:function(…".1.3.2完全的例子：Thecompleteexample界面上只显现项目标names可是form传送的是一个数字ID。echo$form->hiddenField($model,userId);$quotedUrl=CJavascript::encode($this->createUrl(array(user/complete)));$params=array(name=>"userComplete",source=>js:function(request,response){$.ajax({url:".$quotedUrl.",data:{"term":request.term,"fulltext":1},success:function(data){response(data);}});},//additionaljavascriptoptionsfortheautocompleteplugin//See<http://jqueryui.com/demos/autocomplete/#options>options=>array(minLength=>3,//minletterstypedbeforewetrytocompleteselect=>"js:function(event,ui){jQuery(#MyModel_userId).val(ui.item.id);returntrue;}",),);$this->widget(zii.widgets.jui.CJuiAutoComplete,$params);这段代码输入了一个保留有被选择的user的ID的hiddenformfield。在selectfunction中，经由过程它的htmlid，在selectfuction中更新。固然，这个ID是依存于model的名字的。常常是"ModuleName_AttributeName"种情势，可是你应当反省你的HTMLform来断定一下。更天真的代码应当用CHtml::resolveNameID()来算出这个ID。稍后将会说几个要点。A，在ajax参数中，”data”不该该是像"fulltext=1&term="+request.term如许的string。B，假如你必要在”data“中夹杂PHP值，利用CJavaScript::encode().C,AJAXcall的url是在PHP中组建的，由于这是独一的可移植的计划。/***Proposecompletionsforaterm(AJAX).*/publicfunctionactionAjaxComplete(){if(!YII_DEBUG&&!Yii::app()->request->isAjaxRequest){thrownewCHttpException(403,Forbiddenaccess.);}if(empty($_GET[term])){thrownewCHttpException(404,Missing"term"GETparameter.);}$term=$_GET[term];$filters=empty($_GET[exclude])?null:(int)$_GET[exclude]);header(Content-Type:application/json;charset="UTF-8");echojson_encode(User::completeTerm($term,$exclude));Yii::app()->end();}重点的几行读取GET”term“参数，发送JSON头，用JSON加密了局。假如你的编码不是utf-8，你应当用实行效力稍慢的Yii静态办法CJson::encode()而不是json_encode()下面的办法中静态办法User::completeTerm()应当前往一个array(array("id"=>xx,"value"=>xx,"label"=>xx),array(...),array(...),...)1.4用AJAX和CHtml部分革新在Yii中有2个静态办法CHtml::ajaxLink()CHtml::ajaxbutton()ThefollowingcodewillreplacethecontentoftheHTMLelementofID"my-profile"withtheoutputofacalltotheaction"ajaxcontent"ofthecontroller"profile".echoCHtml::ajaxLink(Updateprofile,array(profile/ajaxcontent,id=>$id),//YiiURLarray(update=>#my-profile)//jQueryselector);固然了，这类情形下，action"profile/ajaxcontent"必需输入HTML,只管不是一个完全的HTML页面。假如你更喜好前往一个布局化数据并在JS中剖析它，能够用一个"success"替换"update"，以下：//thedatareceivedcouldlooklike:{"id":3,"msg":"Noerrorfound"}array(success=>js:function(data){$("#newid").val(data.id);$("#message").val(data.msg);})输入JSON最烦琐的办法就是用CJson::encode()。1.5ExtensionsthatwrapJSintoPHPclasses除官方的Yii类，很多extension都供应JS特征。一些extensions仅仅是一些wrappers，试图让yii跟某些JS插件的整合更便利。假如你正在着一些特别的特征，请参照JSextensions列表。/****2.WritingcustomJScodetranslatedbyphp工程师http://blog.csdn.net/phpgcs****/在写你自界说的代码之前，别忘了反省下是不是有合适你需求的PHPwrappers如，JUIWidgetsWebWidgetsJSextensions2.1加载JS库。RequiringsomeJSlibraries(jQueryandsuch)一些JS库跟着Yii刊行。当PHP代码必要的合适会主动加载。假如你想要确保它们一般加载，能够用：//LoadjQueryUI(andalsojQuerywhichisrequiredbyjQueryUI)Yii::app()->clientScript->registerCoreScript(jquery.ui);默许地，CClientScript::registerCoreScript()会在页面的底端加载。反复写两遍没有影响。2.2行内JS（嵌进HTML的JS）InlineJS(embeddedintheHTMLpage)一小段的JS能够写在一个PHPstring中。Yii::app()->clientScript->registerScript(uniqueid,alert("ok"););关于长的JS代码，没有了语法高亮的撑持的确很疾苦。但我们能够如许：//rawJSfileexpandedintothepageYii::app()->clientScript->registerScript(uniqueid,file_get_contents(js/mycode.js));//JSfilewithembeddedPHPcodeob_start();includejs/mycode.js;Yii::app()->clientScript->registerScript(uniqueid,ob_get_clean());2.3援用内部的JS固然了，假如一个JS老是必要的话，修正layouttemplate是一种办法，可是当JS文件只要在某些哀求中必要的话，能够如许：//LoadafilewithanabosluteandexternalURLYii::app()->clientScript->registerScriptFile(http://example.com/a.js);//Loadafilefrom"js/custom.js"undertherootoftheapplicationYii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl./js/custom.js);我们还能够用CClientScript::POS_HEAD,等参数来决意甚么合适加载我们的script我们也能够用相似办法加载其他的文件，如CSS等。2.4经由过程assets加载内部JS一些情形下，JS代码不在一个public的目次下。好比，当你开辟一个extension后，一切的文件都在"protected/extensions"之下。这时候候，你必需起首引诱Yii将你的JS代码公布到assets目次下。//Putthelocaldirectoryintotheapplicationsassets$assetsUrl=Yii::app()->assetManager->publish(__DIR__./myassets);//LoadapublishedfileYii::app()->clientScript->registerScriptFile($assetsUrl./custom.js);更多具体用法参考CAssetManager::publish()2.5用inline代码仍是内部文件？在加载js时，经由过程一个JS文件加载会更让人喜爱，有良多缘故原由，最次要的是可读性好。可是，有些义务不成以地道在JS中完成的。举例来讲：没有可移植的举措来经由过程JS来天生一个Yii的URL。路径取决于CUrlManager的设置。一种办理举措就是把一切的JS代码放进一个文件，用在PHP中界说的JS变量来完成。Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl./js/custom.js);$vars=array(ajaxUrl=>$this->createUrl(complete,id=>$model->id,);Yii::app()->clientScript->registerScript(variables,varmyApp=.CJavascript::encode($vars).;);除CJavascript::encode(),静态的办法CJavascript::quote()也是有效的。$url=$this->createUrl(app/ajaxProcessor);$cs->registerScript(var1,"varmyUrl=".$url.";");//canbreakwithsomeURLs$cs->registerScript(var1,"varmyUrl=".CJavascript::quote($url,true).";");3.停止语只管你能够在不体贴PHP框架的情形下在一个Yii使用中写JS，可是有良多坏处。好比，JS利用的URL在初次设置改动时，大概会堕落。大概一些页面会由于Yii的JS跟开辟者的JS库抵触而溃散失落。只管你能够不必Yii供应的wrappers，你仍旧应当利用一下3个：CClientScript::registerCoreScript()CClientScript::registerScriptFile()CClientScript::registerScript()

复制代码