PHP框架之ThinkPHP的读书计算(1) AJAX

2019-07-11 02:28栏目:技术创新

ThinkPHP完全支持Ajax,并且还内置了一个SmartAjax和ThinkAjax类库,你可以不通过任何其他Ajax类库包就可以在ThinkPHP中使用Ajax支持。
首先说一下ThinkPHP的JS类库以及如何在ThinkPHP中引入Js类库

JS类库
ThinkPHP框架自带了一个易于扩展的JS类库,并且通过标签库技术和JS方法轻松导入。
JS类库的引入给ThinkPHP的发展和企业级应用开启了新的一面,同时也给基于ThinkPHP的应用开发定义了一个相对简单的JS导入规范。这个规范类似于ThinkPHP基类库的命名空间导入方式,并且该规范同样可以适用于CSS文件的导入。下面先看个例子:
基于标签库技术的JS类库引入方法

  • <html:import type='js' file='Js.Base' /> html:import file='Js.Util.Calendar' />
  • <

使用html:import标签 可以引入所需要的JS文件,如果没有指定type,则默认为js,import的根目录可以设定,也可以通过basepath参数指定。以上的标签就表示导入 Js/Base.js、 Js/Util/Calendar.js、 ../public/Js/common.js。
这种方式的Js导入是显式的,除了以上标签库形式的导入,ThinkPHP还支持隐式的JS方法导入JS文件。
在Base.js文件中定义了_import方法,可以起到和html:import标签类似的功能,例如:

  • <SCRIPT LANGUAGE='JavaScript'> ImportBasePath = ''; _import('Js.Form.CheckForm'); //--> </SCRIPT>
  • <!--

要使用_import方法在Js文件中隐式导入所需的JS类库,前提是必须加载Base.js文件和设定ImportBasePath 参数(即导入根目录),并且该方法只能导入JS文件。
除此之外,ThinkPHP提供的JS类库还提供了基于文件名方式导入JS和CSS的方法:ImportJS和ImportCss。
ThinkPHP框架目前的JS类库还比较有限,但是开发人员可以很方便的扩充自己的JS类库,并且随着ThinkPHP的不断完善,也一定会提供更加丰富的JS类库。
目前提供的类库有:

  • Base.js JS基础文件
  • String目录 字符串操作扩充类
  • Util目录 工具类库
  • Form目录 表单操作类库

SmartAjax和ThinkAjax
SmartAjax 是一个Ajax类库,纯JS解决方案,参考了CoreAjax的某些功能实现,支持HTML元素和事件绑定Ajax操作、表单提交,并可以定时执行,支持更新效果。 ThinkAjax和ThinkPHP结合,在返回数据格式上面专门针对ThinkPHP作了处理,其他用法和SmartAjax类似。

主要属性:
updateTip //更新提示信息,支持HTML method //提交方法POST 或者GET effect //更新效果,采用mootools类库,例如 {”font-size”:[0,25],”opacity”: [1,0.3]} 主要方法:
// 发送Ajax请求
send(提交URL,提交参数,结果显示DIV对象或者ID,更新显示效果,定时执行时间间隔)

// 发送表单Ajax操作
sendForm(表单对象或者ID,提交URL,结果显示DIV对象或者ID,更新显示效果)

// 绑定Ajax操作到HTML元素和事件
bind(源HTML元素或者ID,绑定事件,提交URL,提交参数,结果显示DIV对象或者ID,更新效果)

// 页面加载时候进行Ajax操作
load(提交URL,提交参数,结果显示DIV对象或者ID,更新效果)

// 定时执行Ajax操作
repeat(提交URL,提交参数,结果显示DIV对象或者ID,执行间隔,更新效果)

使用举例:

  • // 加载需要的类库
  • <script language='JavaScript' src='/Js/prototype.js'></script> <script language='JavaScript' src='/Js/mootools.js'></script>
  • <script language='JavaScript' src='/Js/SmartAjax.js'></script> SmartAjax.updateTip = "更新中~";
  • SmartAjax.effect = {'font-size':[0,30],'opacity': [1,0.3]};
  • // 页面加载时执行通过Ajax操作在后台执行load.php
  • SmartAjax.load('");
  • // 绑定click操作到id为run的html元素,执行Ajax
  • SmartAjax.bind('run','click','");
  • // 每隔1秒种执行time.php,输出
  • SmartAjax.repeat(');
  • // Ajax方式提交表单数据
  • SmartAjax.sendForm('login', APP '/User/checkLogin/','result',doLogin);

Ajax文件上传
ThinkPHP框架内置了对Ajax文件上传(非真正Ajax)的实现。采用的是iframe的方式对文件上传进行支持。结合ThinkPHP的文件上传类,可以很方便地进行文件上传和批量上传。下面是一个典型的文件上传示例代码:

  • <form id="upload" METHOD=POST action="__APP__/Attach/insert/" enctype="multipart/form-data" target="iframeUpload"> INPUT TYPE="hidden" name="_AJAX_SUBMIT_" value="1"> iframe name="iframeUpload" src="" width="350" height="35" frameborder=0 SCROLLING="no" style="display:none"></iframe> INPUT TYPE="hidden" name="_uploadFileResult" value="result"> INPUT TYPE="hidden" name="_uploadFileType" value="jpg,gif,png" > INPUT TYPE="hidden" name="_uploadSaveRule" value="{$user.id}"> INPUT TYPE="hidden" name="_uploadFormId" value="upload"> INPUT TYPE="hidden" name="_uploadFileSize" value="20480" > INPUT TYPE="hidden" name="_uploadResponse" value="uploadComplete"> INPUT TYPE="file" name="file"> INPUT TYPE="submit" value="上传" > form>
  • <
  • <
  • <
  • <
  • <
  • <
  • <
  • <
  • <
  • <
  • </

上传完成后,ThinkPHP系统会在iframe里面返回js代码和数据,并根据自定义的方法更新页面的result标签。更多关于文件上传方面的掌握请看 文件上传类的使用教程

后端Ajax数据返回
SmartAjax是一个独立的前端JS类库,其运行并不需要后台支持。不过,在后台处理和数据返回方面,结合ThinkPHP框架提供的一些完善处理,能够使得后台的开发效率提高。首先,在页面使用Ajax方式提交的时候使用_AJAX_SUBMIT_隐藏变量或者ajax变量,后台能够自动识别该操作为Ajax操作,并作出相应的处理。例如,表单提交Ajax方式,在form中添加 <INPUT TYPE="hidden" name="_AJAX_SUBMIT_" value="1">
如果使用SmartAjax.send方法提交操作,直接在参数里面添加ajax变量

  • SmartAjax.send('url','ajax=1&name=thinkphp','result);

在后台Action类处理完毕后,简单使用:
ajaxReturn($data,$info,$status) 来返回数据到客户端,其中
$data 表示需要返回客户端的数据,可以是字符串、数组或者对象(经过JSON_ENCODE编码,可以被js直接使用)
$info 表示提示信息(例如操作成功、失败等)
$status 表示操作状态码(1表示成功 0 表示失败 可以由应用自己定义,客户端作相应处理就可以了)
通常的方式我们需要使用echo或者exit来输出数据,并且还需要设置utf8编码,最麻烦的是还要自己进行json编码,使用AjaxReturn方法,一切都内置处理了。并且,另外一个方便之处是,不仅仅可以返回数据,还可以返回操作状态(例如操作失败还是成功)以及相关提示信息。 ThinkPHP对于JSON的处理已经作了兼容处理,无论是PHP4还是PHP5都可以直接使用JSON_ENCODE方法来对PHP对象、数组或者字符串等类型直接编码成JSON数据返回给客户端由JS处理。

为了更好的获取ThinkPHP后台Action的ajaxReturn方法返回的信息,框架JS类库中增加了一个ThinkAjax类库为后台ajax信息返回提供完全支持。 ThinkAjax类的使用和SmartAjax基本类似,只是简化了操作,只需要在客户端定义接受数据的处理方法,其他的由ThinkAjax类库自动处理了,包括信息提示。一个ThinkAjax的使用例子:

  • ThinkAjax.sendForm('formId','__URL__/action/',complete); complete(data,status,info){ // 获取返回数据,并进行处理 }

版权声明:本文为博主原创文章,未经博主允许不得转载。


版权声明:本文由新浦京娱乐站_新浦京娱乐场官网_新浦京娱乐发布于技术创新,转载请注明出处:PHP框架之ThinkPHP的读书计算(1) AJAX