zoukankan      html  css  js  c++  java
  • thinkphp ajax添加及删除

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

    开发步骤:

    1、由于是给后台添加一个增加电影及电影链接的功能,所以控制器在Admin下。

    在路径 ApplicationLibActionAdmin 下新建控制器 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、添加模板

    在 ApplicationTplAdminMvadd 目录下添加静态页面模板 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="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>
    

    技术点:

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

  • 相关阅读:
    如何使用phantomJS来模拟一个HTML元素的鼠标悬停
    nodejs中使用cheerio爬取并解析html网页
    Node.js 动态网页爬取 PhantomJS 使用入门(转)
    一口一口吃掉Hibernate(五)——一对多单向关联映射
    开源 免费 java CMS
    [WinForm]dataGridView导出到EXCEL
    关键帧和动画
    uva 696
    uva 11181
    IE下target获得焦点时存在虚线的问题
  • 原文地址:https://www.cnblogs.com/jeib/p/5991662.html
Copyright © 2011-2022 走看看