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://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>

技术点:

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

时间: 2024-08-05 19:32:02

thinkphp ajax添加及删除的相关文章

使用EasyUI实现添加和删除功能

        增删该查是任何一个项目都少不了的功能操作,这篇博文主要简介一下如何使用EasyUI实现添加和删除功能.         首先,导入EasyUI的js代码: <link href="~/EasyuiSource/themes/default/easyui.css" rel="stylesheet" /> <link href="~/EasyuiSource/themes/icon.css" rel="st

MVC5 网站开发之六 管理员功能之添加、删除、重置密码、修改密码、列表浏览

  一.安装插件. 展示层前端框架以Bootstrap为主,因为Bootstrap的js功能较弱,这里添加一些插件作补充.其实很多js插件可以通过NuGet安装,只是NuGet安装时添加的内容较多,不如自己复制来的干净,所以这里所有的插件都是下载然后复制到项目中. 1.Bootstrap 3 Datepicker 4.17.37 网址:https://eonasdan.github.io/bootstrap-datetimepicker/ 下载并解压压缩包->将bootstrap-datetim

打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件

第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demoback.lalalaweb.com  前台:demo.lalalaweb.com 演示过程中可能会发现bug,希望即时留言反馈,谢谢 源码下载:https://github.com/sutianbinde/classweb               //不是全部的代码,每次更新博客才更新代码 学

利用jquery动态添加和删除表格的一行,并且保存单行数据

开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <form action="" id="" method="post"> ... <table id="addTable" > <tr class="first_tr"> <th&

RecyclerView动态添加、删除及点击事件

上一节讲解了RecyclerView的三种显示方式,本节将主要研究一下RecyclerView的动态添加.删除及其单击和长按事件的处理.我们在上一节代码的基础上进行相关操作. 一.修改适配器类MyAdapter,加入添加和删除这两个方法: public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> { private Context context; private List<String>

Ansible 从MySQL数据库添加或删除用户

mysql_user - 从MySQL数据库添加或删除用户. 概要 要求(在执行模块的主机上) 选项 例子 笔记 状态 支持 概要 从MySQL数据库添加或删除用户. 要求(在执行模块的主机上) MySQLdb的 选项 参数 需要 默认 选择 注释 append_privs (1.4 加入) no no yes no 将priv定义的权限附加到此用户的现有权限,而不是覆盖现有的权限. check_implicit_admin (1.3 加入) no no yes yes 检查mysql是否允许以

Ansible 从远程主机添加或删除MySQL数据库

mysql_db - 从远程主机添加或删除MySQL数据库. 概要 要求(在执行模块的主机上) 选项 例子 笔记 状态 支持 概要 从远程主机添加或删除MySQL数据库. 要求(在执行模块的主机上) MySQLdb的 mysql(命令行二进制) mysqldump(命令行二进制) 选项 参数 需要 默认 选择 注释 collation no     整理模式(排序).这仅适用于新的表/数据库,并且不更新现有的表,这是MySQL的限制. CONFIG_FILE (2.0中加入) no ?/ .my

支持插入、添加、删除的PyGridTableBase子类

网格控件是用以显示一个二维的数据集的.要使用该控件显示有用的信息,你需要告诉该控件它工作所基于的是什么数据.在wxPython中,有两种不同的机制用于在网格控件中处理数据,它们之间在处理数据的添加,删除和编辑的方式上有些许的不同.网格控件可以直接处理每行和每列中的值.数据可以通过使用一个网格表(grid table)来间接地处理我们要讨论正是第二种方式,至于如何实现的细节,这里不再赘述(网上已经有很多例子了),只简单讲些主要步骤:创建wx.grid.PyGridTableBase的子类,并覆盖父

ArcEngine查询、添加、删除要数的方法

转自原文ArcEngine查询.添加.删除要数的方法 1.查找数据 1).利用FeaturCursor进行空间查询 //空间查询 ISpatialFilter spatialFilter = new SpatialFilterClass(); spatialFilter.Geometry = envelope;//指定几何体 String shpFld = featureClass.ShapeFieldName; spatialFilter.GeometryField = shpFld; spa