首頁 > 開發者 > 網站開發

thinkphp ajax添加及刪除

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：ref   路徑   array   app   ati   url   ble   dac   建立   

寫在前面的話：應客戶需求需要給後台增加自助添加電影名稱和連結的功能，添加後在前台能自動讀取顯示。

開發步驟：

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://www1.qixoo.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>

技術點：

動態增加和刪除表格中的資料。

thinkphp ajax添加及刪除

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More