thinkphp ajax添加及删除

写在前面的话：应客户需求需要给后台增加自助添加电影名称和链接的功能，添加后在微信前台能自动读取显示。

开发步骤：

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>

技术点：

动态增加和删除表格中的数据。

posted @ 2016-10-24 04:12  雁塔小兵  阅读(907)  评论(0)  编辑  收藏  举报