通过点击事件获取相应数据的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. ios 中pickerView城市选择和UIDatePicker生日选择

    代码详见压缩包

  2. SpringBoot（五）Springmvc+Mybatis+mysql

    为了整合这个花了,好长时间,因为上几个连在一起,在pom文件中有没注释的配置,导致我找这个问题找了好久.下面开始 1,先new project 时选择spring initializr,新建好一个空项 ...

  3. ecmall 后台添加新菜单

    所谓的开发新菜单,其实是和开发模块相对比的,之前说的开发模块,是在应对较大的,或者较为复杂,又相对独立于其他功能的项目需求. 而开发菜单,就是简单的在后台增加一个一级菜单以及其子菜单,或者直接在现有的 ...

  4. UVa839

    这个引用好精髓. #include <iostream> #include <cstring> #include <string> #include <map ...

  5. C语言求矩阵的逆

    #include "stdafx.h" #include <stdio.h> #include <stdlib.h> #include <window ...

  6. Apache ZooKeeper 服务启动源码解释

    转载:https://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper-code/ 本文首先讲解了 Apache ZooKeeper 服 ...

  7. Property ‘password’ threw Exception

    问题描述: Maven项目在tomcat启动的时候总是报Propety 'password' threw exception异常时,说明password不对,但核对之后没有问题 解决方案: 核对pas ...

  8. uniq的坑坑

    很久没有做过文本统计之类的操作了,今天有点任务弄一下,幸亏机智的我列出了全部看了一遍,发现uniq的时候还是有重复的,然后总结了一下 假如我有1.txt这个文本: 10.0.0.1 10.0.0.1 ...

  9. HTML5操作麦克风获取音频数据（WAV）的一些基础技能

    基于HTML5的新特性,操作其实思路很简单. 首先通过navigator获取设备,然后通过设备监听语音数据,进行原始数据采集. 相关的案例比较多,最典型的就是链接:https://developer. ...

  10. 小程序 去掉 <button /> 组件默认 border 边框样式

    代码: <button class="btn">点击</button> 效果图: 目的:去掉 <button /> 默认样式中的 backgro ...