thinkphp ajax添加及删除
2016-10-24 04:12
176 查看
写在前面的话:应客户需求需要给后台增加自助添加电影名称和链接的功能,添加后在微信前台能自动读取显示。
开发步骤:
1、由于是给后台添加一个增加电影及电影链接的功能,所以控制器在Admin下。
在路径 Application\Lib\Action\Admin 下新建控制器 MvaddAction.class.php
控制器全部代码如下:
2、添加模板
在 Application\Tpl\Admin\Mvadd 目录下添加静态页面模板 index.html
静态页面为已经全部开发完成的页面。
前端框架采用bootstrap
技术点:
动态增加和删除表格中的数据。
开发步骤:
1、由于是给后台添加一个增加电影及电影链接的功能,所以控制器在Admin下。
在路径 Application\Lib\Action\Admin 下新建控制器 MvaddAction.class.php
控制器全部代码如下:
<?php //继承PublicAction后访问本页面时必须先登录后台 class MvaddAction extends PublicAction { public function index() { $result = M("movie")->select(); //var_dump($result);exit; $this->assign("name",$result); $this->display (); } public function add() { $data["mvname"] = $_POST["name"]; $data["mvlink"] = $_POST["mvlink"]; $result = M("movie")->add($data); if($result){ $this->ajaxReturn($result,"新增成功!",1); //echo "ok"; } } public function del(){ $id = $_POST['id']; $result = M("movie")->where(array("id"=>$id))->delete(); if($result){ $this->ajaxReturn($result,"删除成功!",1); } } public function show(){ $id = $_GET['id']; $link = M("movie")->where(array("id"=>$id))->find(); $this->assign("link",$link['mvlink']); $this->display(); } }
2、添加模板
在 Application\Tpl\Admin\Mvadd 目录下添加静态页面模板 index.html
静态页面为已经全部开发完成的页面。
前端框架采用bootstrap
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.4/css/bootstrap.css" rel="stylesheet"> </head> <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> <body> <form role="form" action="#"> <div class="form-group"> <label for="exampleInputEmail1">电影名称</label> <input type="text" class="form-control" id="mvname" placeholder="请输入电影名称 如:精品电影"> </div> <div class="form-group" > <label for="exampleInputPassword1">电影链接</label> <input type="text" class="form-control" id="mvlink" placeholder="电影链接:如 http://www.029gc.cn"> </div> <button type="button" id="add" class="btn btn-primary btn-lg btn-block" style="width:20%;align:center;">保存</button> </form> <table class="table table-bordered"> <tr id="tr"><td>名称</td><td>链接</td><td>操作</td></tr> <foreach name="name" item="vo"> <tr id="{$vo.id}tr"><td>{$vo.mvname}</td><td>{$vo.mvlink}</td><td><a href="javascript:void(0)" onclick=dellink({$vo.id});>删除</a></td></tr> </foreach> </table> </body> <SCRIPT type=text/javascript> $("#add").click(function (){ var name = $("#mvname").val(); var link = $("#mvlink").val(); if(name==""||link==""){ alert("电影名称或链接不能为空"); return; }else{ $.ajax({ url: "../index.php?g=Admin&m=Mvadd&a=add", type: "POST", data:{"name":name,"mvlink":link}, dataType: "json", error: function(){ alert('Error loading XML document'); }, success: function(data){ alert(data.info); $("#tr").after("<tr id="+data.data+"tr><td>"+name+"</td><td>"+link+"</td><td><a href='javascript:void(0)' onclick=dellink1("+data.data+");>删除</a></td></tr>") } }); } }); function dellink(id){ $.ajax({ url: "../index.php?g=Admin&m=Mvadd&a=del", type: "POST", data:{"id":id}, dataType: "json", error: function(){ alert('Error loading XML document'); }, success: function(data){ alert(data.info); $("#"+id+"tr").remove(); } }); } </SCRIPT> </html>
技术点:
动态增加和删除表格中的数据。
相关文章推荐
- 【Vegas原创】使用javascript实现两个listbox中的添加、删除
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件
- Error 14274: 无法添加、更新或删除从MSX服务器上发起的作业.
- 查找删除Code First Entity Framework基本与最佳添加(add/create),删除(delete/remove),修改(update/modify)操作
- JS动态添加option和删除option
- 任务调度开源框架Quartz动态添加、修改和删除定时任务
- C语言基础算法——数组元素的查找、删除和添加
- linux下添加链接与删除链接(ln命令的用法)
- 数据的增删改查:数据的添加,修改和删除与事务
- 在js中为对象添加和删除属性
- MFC中简单的数据库文件操作(添加,修改,查找,删除)
- 链表的添加、查找删除、反向打印c++代码
- Oracle:添加用户,赋权,修改密码,解锁,删除用户
- SQL 添加修改删除列
- 动态添加删除网卡 - 每天5分钟玩转 OpenStack(156)
- JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
- json 数据 添加 删除 排序
- Android应用添加(创建)和删除及判断是否存在桌面快捷方式
- 为GRIDVIEW“删除”列添加确认对话框
- Jquery显示、隐藏元素以及添加删除样式