通过点击事件获取相应数据的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. C#磁性窗体设计

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  2. SVG的用法

    三种添加方式 <iframe src="图的地址" frameborder="0"></iframe> <object width ...

  3. day 11 函数参数

    形参与实参 形参:就是形式参数,在函数定义时,写在括号里面指定的参数就是形式参数 实参:在调用函数时传入的参数就是实参 在调用函数时就会自动的把形参与实参绑定起来,然后调用结束之后,解除绑定关系 位置 ...

  4. Windows10 bypassUAC绕过用户账户控制

    使用这个github上的项目: https://github.com/L3cr0f/DccwBypassUAC 可以自行编译 全程UAC不介入,没反应. 测试: 权限提升真实有效

  5. Canvas名侦探柯南-canvas练习

    var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); / ...

  6. 创建cocoapod静态库发布到网上使用

    1,在github上创建一个空仓库,要有licence和readme,clone到本地 2,pod lib create 项目名,这样就创建了一个静态库 3,pod spec create 项目名,创 ...

  7. testDecoration

    def count(): fs = [] for i in range(1,4): def f(): n=i*i return n fs.append(f) return fs c1,c2,c3 = ...

  8. Chromium Settings页面修改

    /********************************************************************** * Chromium Settings页面修改 * 说明 ...

  9. vue学习笔记——组件的优化

    Vue 应用性能优化指南 1 给组件定义name,然后在同级目录新建index文件: import Count from './count.vue' export Count; 2 优化大数据的列表 ...

  10. WPF中获取控件默认样式和模板XML

    从微软官方找这个东西甚是困难,似乎根本没有提供.网上说因为版本问题,很难找到,但通过代码却可以轻易获得.经测试,生成的样式文件非常完美,完全不用修改即可应用. 代码如下: public static ...