通过点击事件获取相应数据的id,将id传到的控制器，根据id执行删除的sql语句，执行官删除；同时ajax的有点就是快捷方便，无刷新，增强用户的体验。
<?php

namespace app\index\controller;

use think\Controller;

use think\Db;

use think\Request;

class Del extends Controller

{

    //展示数据

    public function show(){

        $data = Db::table('yun')->select();

        return view("show",['data'=>$data]);

    }

    //删除

    public function del(){

        $id = Request::instance()->param("id");

        return Db::table('yun')->where('id',$id)->delete();

    }

}
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ajax删除</title>

</head>

<body>

<center>

    <table>

        <tr>

            <td>ID</td>

            <td>姓名</td>

            <td>年龄</td>

            <td>地址</td>

            <td>操作</td>

        </tr>

        {volist name="data" id="vo"}

        <tr class="{$vo.id}">

            <td>{$vo.id}</td>

            <td>{$vo.name}</td>

            <td>{$vo.age}</td>

            <td>{$vo.address}</td>

            <td>

                <button type="button" class="del" id="{$vo.id}">删除</button>

            </td>

        </tr>

        {/volist}

    </table>

</center>

</body>

</html>

<script src="/static/js/jquery.js"></script>

<script>

    $(".del").click(function(){

        var id = $(this).attr("id");

        $.ajax({

            method:"POST",

            url:"{:url('del/del')}?id="+id

        }).done(function(d){

            if(d==){

                $("."+id).remove();

                alert("删除成功");

            }else{

                alert("删除失败");

            }

        });

    });

</script>

ajax单删的更多相关文章

  1. ajax全选、全不选、反选、单删/批删

    <meta charset="utf-8"> <?php //链接数据库 $link = mysqli_connect('127.0.0.1','root','r ...

  2. jquery中的全选、反选、全不选和单删、批删

    HTML页面 <!doctype html><html lang="en"><head> <meta charset="UTF- ...

  3. TP5中即点即改，json分页，单删

    HTML页面: <!doctype html><html lang="en"><head> <meta charset="UTF ...

  4. 利用 html的锚点（元素a）功能实现ajax单页面应用的浏览器后退前进功能

    一.问题 随着AJax技术的普及,单页面web程序的应用越来越广泛. 所谓单页面应用程序,简单的说,就是应用只有一个主网页,第一次加载后,后续页面只会利用js和ajax到服务器获取数据进行页面的局部刷 ...

  5. django ajax增 删 改 查

    具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...

  6. laravel 7 H-ui模板ajax批删

    1,HTML页面写一个button按钮 <a href="javascript:;" onclick="deleteAll()" class=" ...

  7. tp5 ajax单文件上传

    HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  8. ajax批删

  9. js正则、js全选、反选、全不选、ajax批删

    <button onclick="fun1()">全选</button><button onclick="fun2()">全 ...

随机推荐

  1. vscode 完全支持zeng code的写法

    一.快速编写HTML代码 1.  初始化 HTML文档需要包含一些固定的标签,比如<html>.<head>.<body>等,现在你只需要1秒钟就可以输入这些标签. ...

  2. C# 数据推送 实时数据推送 轻量级消息订阅发布 多级消息推送 分布式推送

    前言 本文将使用一个NuGet公开的组件技术来实现数据订阅推送功能,由服务器进行推送数据,客户端订阅指定的数据后,即可以接收服务器推送过来的数据,包含了自动重连功能,使用非常方便 nuget地址:ht ...

  3. box-shadow做出一条线两种颜色

    今天同事问我一个问题,说下图的效果是怎么实现的 我当时想都没有想说这不就是两条线嘛,他说是一条线用box-shadow做出来的,之前也没有遇到过,觉得很有意思就试了一把. 语法 box-shadow: ...

  4. JAVA高级篇(三、JVM编译机制、类加载机制)

    一.类的加载过程 JVM将类的加载分为3个步骤: 1.装载(Load) 2.链接(Link) 3.初始化(Initialize) 其中 链接(Link)又分3个步骤,如下图所示: 1) 装载:查找并加 ...

  5. webpack初步学习

    https://segmentfault.com/a/1190000006178770 该篇文章足够webpack入门的学习了,对webpack有个初步的了解和认识.

  6. export 和import使用

    在JavaScript ES6中,export与export default均可用于导出常量.函数.文件.模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方 ...

  7. Jquery仿百度经验左右滚动切换效果(转)

    http://www.xwcms.net/webAnnexImages/fileAnnex/201608/61342/index.html

  8. pytorch基础

    1.创建一个未初始化矩阵 from __future__ import print_function import torch x = torch.empty(2,3)#uninitialized m ...

  9. python写service时全局变量问题

    在尝试用flask写service的过程中,我发现全局变量使用虽然很方便,但其实是很冒险的. 本次我使用的是声明global变量的方式,如果作为本地的单次使用的程序来说,确实没有问题并且很好用,对于竞 ...

  10. https://blog.csdn.net/doegoo/article/details/50749817

    因为使用DiscuzX3.2进行系统的整合后,因为只是想在原J2EE的系统上增加论坛功能,而且J2EE中已经有一套用户的注册认证的体系,所以不需要在Discuz的系统中去注册以及登录功能,而是通过在J ...