tp5框架基于Ajax实现列表无刷新排序功能示例_php实例

来源:脚本之家  责任编辑:小易  

其实框架很简单的,你可以认为它是一个百工具,甚至一个插件。框架的作用,就是将一个公用的,常用的技术,封装起来,帮你度处理一些基础的东西,可以让你不用再去写那些繁琐的东西。就拿你要学的struts来说:他本质上也是用java写的,和我们自己写的类没有区别,他知实现的东西我们自己也可以实现。比如接收客户端的数据,我们是用request.getParameter()来的,但是如果有很多个参数,我们要写很多个,很麻烦。struts它就帮我们实现,道不用我们写,直接写专个属性,就可以得到。其实本质还是用request.getParameter()。所以你不要再在意框架是什么东西,等你接触了就知道了。属你把它当做一个工具来用,这就是框架。前台框架:jQueryMvc框架:Struts、spring Mvc核心框架:Springorm框架:Hibernate、Spring JDBC、myBatiswww.zgxue.com防采集请勿采集本网。

本文实例讲述了tp5框架基于Ajax实现列表无刷新排序功能。分享给大家供大家参考,具体如下:

基本实现过程:Ajax框架的实现过程比较复杂,通过层层架构,层层继承的方法,提供更多的功能和操作。如果是Ajax技术的使用过程,那么可分为三步: 1.配置请求,就是对要获取数据的地址、发送的参数、请求

在后台管理的时候我们有时需要对数据进行排序,以控制数据在模板显示的顺序,排序的原理就是修改数据库,然后更新视图。我们可以单独写一个方法来实现排序的功能,成功后刷新页面,也可以利用Ajax技术,实现数据的局部请求,也就是无刷新排序的功能。

AJAX只是一个不太成熟的模型,其实也无法根本上解决问题。只是让界面友好一点。如果是用AJAX框架,可以使用微软的,开发起来比较方便。文档比较多。

现在想要达到的效果是在排序的input框中输入数值,点击排序实现无刷新排序的功能。

主要是:dom、xml、javascript这三方面。基于web标准(standards-based presentation)XHTML+CSS的表示;使用 DOM(Document Object Model)进行动态显示及交互;使用 XML 和 XSLT 进行数据交换

首先是表格(cate.html)这一块我们要单独摘出来,放入到一个单独页面当中,方便我们数据的请求。

SWATO Shift Web Applications TO(SWATO)也是一个基于Java的Ajax框架解决方案。SWATO在所有Servlet 2.3或更高版本的容器中都能工作,类似于DWR,它也需要对配置文件做一些更新。有意思的是,SWATO充分利用

<table class="table table-bordered">{include file="news/cateajaxpage"}</table>

url:'CheckUserName.aspx',/ajax请求地址 params:{name:username},/把获取的username值当参数name传到后台 success:function(response,options){/当发送请求成功的时候 var responseArray=Ext.util.JSON.

其中cateajaxpage.html的内容为:

<thead> <tr> <th>ID</th> <th>分类名称</th> <th>排序</th> <th>操作</th> </tr> </thead> <tbody> {volist name="news" id="vo"} <tr> <td>{$vo.id}</td> <td>{$vo.name}</td> <td><input type="text" value="{$vo.order}" name="{$vo.id}"></td> <td> <div class="btn-group open"> <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" aria-expanded="true">操作 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="{:url('admin/news/cateadd',array('id'=>$vo.id))}" rel="external nofollow" >添加子分类</a> </li> <li><a href="{:url('admin/news/cateupd',array('id'=>$vo.id))}" rel="external nofollow" >修改</a> </li> <li><a href="javascript:if(confirm('确认删除?')) location='{:url('admin/news/del',array('id'=>$vo.id))}'" rel="external nofollow" >删除</a> </li> </ul> </div> </td> </tr> {volist name="$vo.children" id="vo1"} <tr> <td>{$vo1.id}</td> <td>|————{$vo1.name}</td> <td><input type="text" value="{$vo1.order}" name="{$vo1.id}"></td> <td> <div class="btn-group open"> <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" aria-expanded="true">操作 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="{:url('admin/news/cateupd',array('id'=>$vo1.id))}" rel="external nofollow" >修改</a> </li> <li><a href="javascript:if(confirm('确认删除?')) location='{:url('admin/news/del',array('id'=>$vo1.id))}'" rel="external nofollow" >删除</a> </li> </ul> </div> </td> </tr> {/volist} {/volist} </tbody>

这里因为使用了无限级分类得到多维数组的技术,所以会有两个volist,如果你不太懂无限级分类的话可以分配过来一个普通的数据过来,重点是:

<input type="text" value="{$vo.order}" name="{$vo.id}"></td>

这句在显示排序值得同时,为每一个input框设置了一个name值,这个值就是分类的id值,通过这种方式,可以为列表当中的所有input框进行区分,且能通过数据库获取到对应的分类。

回到cate.html,写Ajax:

$("#changeOrder").click(function(event) { /* Act on the event */ var json = {}; $("input").not('#top-search').each(function(index, el) { json[$(this).attr('name')] = $(this).val(); }); $.ajax({ url: '{:url("admin/news/cate")}', type: 'post', data: json }) .done(function(data) { $(".table-bordered").html(data); $(document).click(); }) });

其中changeOrder是我们为排序按钮添加的id值,我们把每一组id、order都放进json变量当中,传递给控制器。

控制器代码:

public function cate() { $news_model = model("Newsfenlei"); if (request()->isAjax()) { $post = input('post.'); foreach ($post as $key => $value) { db("newsfenlei")->where('id',$key)->update(['order'=>$value]); } $list = db("newsfenlei")->order('order desc')->select(); $news = $news_model->getNews($list); $this->assign("news",$news); return view('cateajaxpage'); } else { $list = db("newsfenlei")->order('order desc')->select(); $news = $news_model->getNews($list); $this->assign("news",$news); return view(); } }

因为涉及到无限级分类,所以使用了模型层获取数据,getNews方法是获取到无限级分类后的数据,这块大家可以直接使用数据库获取数据,需要注意的是处理Ajax请求的时候,我们根据POST信息进行数据更新,再数据更新以后再查询数据库,将数据分配到模板上。

更多关于thinkPHP相关内容感兴趣的读者可查看本站专题:《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

浏览器端框架:Dojo Dojo是最老的框架之一,于2004年9月开始开发。这个项目的目标是建立充分利用XHR的DHTML工具包,并把重心放在可用性问题上。Dojo只有几个文件,不用处理XHR的建立,只需调用bind方法,并传入想调用的URL和回调方法即可。就这么简单。还可以使用bind方法来提交整个表单。Dojo有一个特性使它独树一帜,这就是它支持向后和向前按钮。尽管这个特性不一定在每个浏览器上都能用(遗憾的是,Safari就是一个异类),但你确实可以注册一个回调方法,在用户点击了向后按钮或向前按钮时触发这个方法。Dojo还提供了changeURL标记,力图解决使用Ajax所固有的书签问题。Dojo看上去是相对成熟的工具包之一,它把重点放在可用性上,这一点很不错。Dojo表现得相当稳定,在它身后还有一些支撑力量。Dojo的邮件列表相当活跃,多看一些文档可能更有帮助。TIBET你觉得Ajax最早是什么时候出现的?根据对此的解释,也许会认为TIBET可能是现存最老的框架。根据文档所述,TIBET小组从1997年就开始开发这个工具包,他们的目标是提供企业级Ajax支持。TIBET看上去不只是包装了XMLHttpRequest对象,它还对Web服务和底层协议提供了支持,并且提供了Google、Amazon和许多其他常用服务的预置包装器。真正让TIBET卓而不群的是,它有一个完全交互式的基于浏览器的IDE,这能大大简化开发、调试和单元测试。Flash/JavaScript集成包 在Ajax之前,Flash很是风行,很多Web网站都建立在Flash平台上。那些曾对Flash狠下一番功夫的人不想完全放弃Flash,利用这个开源项目就能同时利用Ajax技术。这个工具包在所有主要浏览器上都能用,使得JavaScript能够调用ActionScript,ActionScript也能调用JavaScript。可以来回传递大量对象,包括日期、串和数组。Flash/JavaScript集成包的安装涉及一些JavaScript文件,以及两个用于Flash的库函数。从页面上调用ActionScript函数只需几行代码而已。有关的文档相当少,不过,如果你想使用Ajax访问Flash,这个工具包就很值得研究。Google AJAXSLT 基于Google Maps的工作,Google AJAXSLT是使用XPath的XSL转换(XSLT)的JavaScript实现。XSLT可以把XML文档转换为其他语言,如HTML。AJAXSLT允许使用JavaScript在浏览器上直接完成这些转换。Google AJAXSLT在所有主要浏览器上都能工作,它是在BSD许可证下发布的。这个工具包很小,包括几个JavaScript文件,还有一些方便的测试页。Google AJAXSLT不是十全十美的,不过,如果Google Suggest有所提示,我们希望Google AJAXSLT的缺点能很快解决。因为Google是最先使用Ajax的网站之一,我们会很有兴致地看到在未来几个月它还会有所增加。libXmlRequest libXmlRequest框架也是比较老的一个框架,早在2003年就已经发布了。这个框架包括一个JavaScript文件,它相当于XMLHttpRequest对象的一个包装器,提供了两个重载的请求函数:getXml和postXml。另外,它有一些处理缓冲池和缓存的属性,还有一些工具函数处理常见的任务,如解析来自服务器的XML以及修改DOM内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • thinkphp5.1+ajax实现的无刷新分页功能示例
  • thinkphp5 通过ajax插入图片并实时显示(完整代码)
  • thinkphp5框架ajax接口实现方法分析
  • tp5(thinkphp5)框架基于ajax与后台数据交互操作简单示例
  • thinkphp5框架实现基于ajax的分页功能示例
  • thinkphp5 ajax提交表单操作实例分析
  • thinkphp中ajax使用实例教程
  • thinkphp中使用ajax接收json数据的方法
  • thinkphp使用心得分享-thinkphp + ajax 实现2级联动下拉菜单
  • tp5框架基于ajax实现异步删除图片的方法示例
  • php集成动态口令认证
  • php中的trait 特性及作用
  • php数组内存利用率低和弱类型详细解读
  • php实现打包zip并下载功能
  • thinkphp自定义生成缩略图尺寸的方法
  • php判断json格式是否正确的实现代码
  • 推荐一款php+jquery制作的列表分页的功能模块
  • ubuntu下如何升级到php7.4的方法步骤
  • ci映射(加载)数据到view层的方法
  • 基于php socket(fsockopen)的应用实例分析
  • HTML5不支持框架页,有什么代替方法吗?我想用Ajax一个页面请求多个servlet?可以吗?
  • Java开源框架是什么?
  • Ajax的优点和缺点?
  • 大神们求帮助!!我用的是tp5.0框架 我想实现一个功能
  • 请帮忙写出Ajax的框架的作用,应用领域和基本实现过程!!!谢谢!!!
  • 写个聊天室,基于ajax技术的,用什么ajax的什么框架好?
  • 基于Ajax技术的用户定制网站系统开发需要哪些技术,大概框架怎样?
  • ajax中的框架 和它们的区别
  • 下面基于Ajax框架EXT的验证代码是什么意思?请高手指教
  • Ajax的优缺点
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全php基础php技巧php实例php文摘php模板首页php编程php实例thinkphp入门教程thinkphp模板操作技巧总结thinkphp常用方法总结codeigniter入门教程ci(codeigniter)框架进阶教程zend framework框架入门教程php模板技术总结thinkphp5.1+ajax实现的无刷新分页功能示例thinkphp5 通过ajax插入图片并实时显示(完整代码)thinkphp5框架ajax接口实现方法分析tp5(thinkphp5)框架基于ajax与后台数据交互操作简单示例thinkphp5框架实现基于ajax的分页功能示例thinkphp5 ajax提交表单操作实例分析thinkphp中ajax使用实例教程thinkphp中使用ajax接收json数据的方法thinkphp使用心得分享-thinkphp + ajax 实现2级联动下拉菜单tp5框架基于ajax实现异步删除图片的方法示例php集成动态口令认证php中的trait 特性及作用php数组内存利用率低和弱类型详细解读php实现打包zip并下载功能thinkphp自定义生成缩略图尺寸的方法php判断json格式是否正确的实现代码推荐一款php+jquery制作的列表分页的功能模块ubuntu下如何升级到php7.4的方法步骤ci映射(加载)数据到view层的方法基于php socket(fsockopen)的应用实例分析php获取数组长度的方法(有实例)微信公众平台实现获取用户openid教你如何使用php session使用php生成二维码的两种方法(带php发送get、post请求的6种方法简php中把stdclass object转array的微信公众平台网页授权获取用户基laravel框架数据库curd操作、连贯php字符串的连接的简单实例php删除数组中空值的方法介绍thinkphp防止重复提交表单的方法实例分析php不用递归实现无限分级的例子分享codeigniter框架the uri you submitted hphp 传输会话curl函数的实例详解php读取3389的脚本laravel5中实现模糊匹配加多条件查询功能thinkphp中的url跳转用法分析php中通过trigger_error触发php错误示例在ubuntu 18.04上安装php 7.3 7.2和7.0的dwz+thinkphp开发时遇到的问题分析
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved