扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >Ajax如何删除数据与查看数据
  • 520

0
分享到

Ajax如何删除数据与查看数据

2024-04-02 19:04:59 520人浏览 安东尼
摘要

小编给大家分享一下ajax如何删除数据与查看数据，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1.数据库找一张表：颜色表2.主页

小编给大家分享一下ajax如何删除数据与查看数据，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

1.数据库找一张表：

Ajax如何删除数据与查看数据

颜色表

2.主页面

主页面的代码用到tbody；

TBODY作用是：

可以控制表格分行下载，从而提高下载速度。

（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。

使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。

 BODY是html的文本体，一个HTML文件，只有一个BODY，而在TABLE中可以有多个TBODY。

TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上和，

比如：

 以下为引用的内容：head1head2首先显示首先显示再显示再显示foot1foot2

 注意：

*1.TBODY元素在浏览器中不会被渲染表示

*2.当不同行间的单元间合并时各单元格所在的行不要加TBODY标签

提示：TBODY元素内包含的有效标签有：TD、TH、TR 特别提示 本例代码的运行将看不到效果，因为表格中的内容比较少，

只有在数据量大而且表格嵌套较多时才看得到效果。

主页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <script src="Jquery-1.11.2.min.js"></script>
</head>
<body>
<h2>显示数据</h2>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>代号</td>
    <td>名称</td>
    <td>操作</td>
  </tr>
  <tbody id="td">
  </tbody>
</table>
</body>
</html>
<script>
  $.ajax({
    url:"jiazai.PHP",
//    显示所有的数据不用写data
  dataType:"TEXT",
    success:function(data)
    {
    }
  });
</script>

图：

Ajax如何删除数据与查看数据

回调函数里面是空的，等会回来写；

接着是加载页面：

显示：遍历数组，显示出表的内容，具体：

<?php
include ("db.class.php");
$db = new db();
$sql = "select * from min";
$arr = $db->Query($sql);
//遍历
$str="";
foreach ($arr as $v)
{
  $str = $str.implode("-",$v)."|";
  //用-把$v拼起来,拼出来是1-红2-蓝,用|分割，拼出来是1-红|2-蓝|
}
echo $str;

来看一下输出的是什么：

Ajax如何删除数据与查看数据

在最后面多了一条竖线，去竖线：

$str = substr($str,0,strlen($str)-1);
//截取字符串：从第0个开始，截取它的长度-1
//strlen获取字符串长度

再来看：

Ajax如何删除数据与查看数据

现在来写回调函数：

<script>
  $.ajax({
    url:"jiazai.php",
//    显示所有的数据不用写data
  dataType:"TEXT",
    success:function(data)
    {
      var str = "";
      var hang = data.split("|");
      //split拆分字符串
      for(var i = 0;i<hang.length;i++)
      {
        //通过循环取到每一行;拆分出列；
        var lie = hang[i].split("-");
        str = str+
          "<tr><td>"
          +lie[0]+
          "</td><td>"
          +lie[1]+
          "</td><td>操作</td></tr>";
      }
      $("#td").html(str);
      //找到td把html代码扔进去
    }
  });
</script>

写完看下页面：

Ajax如何删除数据与查看数据

3.接下来就可以写删除了：

先在在最后的一个单元格中添加删除按钮，并传一个主键值：

"</td><td>" +
          "<input type='button' ids='"+lie[0]+"' class='sc' value='删除' />" +
          //ids里面存上主键值
          "</td></tr>";

Ajax如何删除数据与查看数据 

给删除按钮添加事件，并调用Ajax方法：

**

异步与同步的区别：

同步需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果

同步是在一条直线上的队列，异步不在一个队列上 各走各的

**

 //给删除按钮加上事件
      $(".sc").click(function(){
        var ids = $(this).attr("ids");
        $.ajax({
          url:"shanchu.php",
          data:{ids:ids},
          dataType:"TEXT",
          type:"POST",
          success:function (d) {
            
          }
        });
      })

回调函数等等回来写；

继续删除处理页面：

<?php
include ("db.class.php");
$db = new db();
$ids = $_POST["ids"];
$sql = "delete from min WHERE ids='{$ids}'";
if($db ->Query($sql,0))
{
  echo "ok";
}
else{
  echo "no";
}

这样来看：

Ajax如何删除数据与查看数据

点击删除，删掉以后不刷新页面，

若是让他自动加载数据，需要把加载数据的代码封装成一个方法，删除的时候调用此方法；就哦可了

主页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h2>显示数据</h2>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>代号</td>
    <td>名称</td>
    <td>操作</td>
  </tr>
  <tbody id="td">
  </tbody>
</table>
</body>
</html>
<script>
  //调用load方法
  load();
  //把加载数据封装成一个方法
  function load()
  {
    $.ajax({
      url: "jiazai.php",
//    显示所有的数据不用写data
      dataType: "TEXT",
      success: function (data) {
        var str = "";
        var hang = data.split("|");
        //split拆分字符串
        for (var i = 0; i < hang.length; i++) {
          //通过循环取到每一行;拆分出列；
          var lie = hang[i].split("-");
          str = str +
            "<tr><td>"
            + lie[0] +
            "</td><td>"
            + lie[1] +
            "</td><td>" +
            "<input type='button' ids='" + lie[0] + "' class='sc' value='删除' />" +
            //ids里面存上主键值
            "</td></tr>";
        }
        $("#td").html(str);
        //找到td把html代码扔进去
        //给删除按钮加上事件
        $(".sc").click(function () {
          var ids = $(this).attr("ids");
          $.ajax({
            url: "shanchu.php",
            data: {ids: ids},
            dataType: "TEXT",
            type: "POST",
            success: function (d) {
              if (d.trim() == "ok") {
                alert("删除成功");
                //调用加载数据的方法
                load();
              }
              else {
                alert("删除失败");
              }
            }
          });
        })
      }
    });
  }
</script>

删除页面代码：

<?php
include ("db.class.php");
$db = new db();
$ids = $_POST["ids"];
$sql = "delete from min WHERE ids='{$ids}'";
if($db ->Query($sql,0))
{
  echo "ok";
}
else{
  echo "no";
}

以上是“Ajax如何删除数据与查看数据”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网VUE频道！

--结束END--

本文标题: Ajax如何删除数据与查看数据

本文链接: https://lsjlt.com/news/73715.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Ajax如何删除数据与查看数据
    小编给大家分享一下Ajax如何删除数据与查看数据，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1.数据库找一张表：颜色表2.主页...
    99+
    2024-04-02
  • ajax怎么实现数据删除、查看详情功能
    这篇文章主要介绍了ajax怎么实现数据删除、查看详情功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。运用bootstrap,jquery和ajax显示一些数据，附加删除功能...
    99+
    2023-06-08
  • Ajax中怎么添加与删除数据
    Ajax中怎么添加与删除数据，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。代码如下:<html> <head> <...
    99+
    2024-04-02
  • 数据库如何删除数据
    drop (删除表)：删除内容和定义，释放空间。简单来说就是把整个表去掉.以后要新增数据是不可能的,除非新增一个表。 drop语句将删除表的结构被依赖的约束（constrain),触发器（trigger)索引（index);依赖于...
    99+
    2023-09-01
    数据库 sql mysql
  • Mysql怎么创建、查看、删除数据库
    本篇内容主要讲解“Mysql怎么创建、查看、删除数据库”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Mysql怎么创建、查看、删除数据库”吧! 1、创...
    99+
    2024-04-02
  • mysql怎么查看表数据删除记录
    要查看表数据删除的记录，可以通过以下步骤在MySQL中进行： 首先登录到MySQL数据库中。 选择要查看的数据库：USE d...
    99+
    2024-05-13
    mysql
  • mysql如何删除数据
    这篇文章给大家分享的是有关mysql如何删除数据的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。删除单个表中的数据使用 DELETE 语句从单个表中删除数据，语法格式为：D...
    99+
    2024-04-02
  • mongodb如何删除数据
    mongodb中删除数据的方法：在mongodb中可以使用remove()和delete()方法函数来删除集合中的文档数据，需要注意的是在执行remove()方法函数前，最好先使用find()命令来查看是否正确；而delete方法分别有两种...
    99+
    2024-04-02
  • laravel如何删除数据
    小编给大家分享一下laravel如何删除数据，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！laravel删除数据的方法：1、根据主键id查询对应的记录，并返回一个...
    99+
    2023-06-26
  • MySQL如何删除数据库表数据
    要删除MySQL数据库表中的数据，可以使用DELETE语句。 语法如下： DELETE FROM table_name; ...
    99+
    2024-04-15
    MySQL
  • ＭongoDB如何创建与删除数据库
    这篇文章主要介绍了ＭongoDB如何创建与删除数据库的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇ＭongoDB如何创建与删除数据库文章都会有所收获，下面我们一起来看看吧。一、创建数据库1、语法MongoDB ...
    99+
    2023-07-01
  • 阿里云数据库数据删除：如何安全有效地删除数据？
    简介 在使用阿里云数据库时，有时候我们需要删除一些不再需要的数据。然而，数据删除是一个敏感的操作，如果不小心操作，可能会导致数据丢失或泄露。因此，在进行数据删除之前，我们需要了解一些注意事项和最佳实践。如何安全有效地删除数据1.备份数据在进...
    99+
    2024-01-29
    数据 阿里 有效地
  • Python删除mongodb数据库和用户，查看Python
    #!/usr/bin/env python #coding:utf-8 from pymongo import MongoClient client = MongoClient('192.168.6.2...
    99+
    2024-04-02
  • AJAX如何实现数据的增删改查操作
    这篇文章主要介绍了AJAX如何实现数据的增删改查操作，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。主页：index.html<!DOCTYPE html>...
    99+
    2023-06-08
  • mysql数据库数据删除如何恢复
    这篇文章将为大家详细讲解有关mysql数据库数据删除如何恢复，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。在mysql有时执行了错误的update或者delete时导致大...
    99+
    2024-04-02
  • phpmyadmin如何删除数据表中的数据
    这篇文章主要介绍phpmyadmin如何删除数据表中的数据，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！使用phpmyadmin数据库管理工具删除数据表中的数据，例如：我们还是以us...
    99+
    2024-04-02
  • 数据库中如何批量删除数据
    这篇文章将为大家详细讲解有关数据库中如何批量删除数据，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 在一个Oracle数据库运行过程中，有时候会遇到要批量删除数据的情况...
    99+
    2024-04-02
  • php如何删除mysql数据库的数据
    这篇文章主要介绍“php如何删除mysql数据库的数据”，在日常操作中，相信很多人在php如何删除mysql数据库的数据问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”php如何删除mysql数据库的数据”的疑...
    99+
    2023-07-05
  • 如何删除SQLite数据库中的数据
    要删除SQLite数据库中的数据，可以使用DELETE语句。以下是一个示例： DELETE FROM table_name ...
    99+
    2024-04-09
    SQLite
  • sql数据库如何查看表数据
    要查看SQL数据库中的表数据，您可以使用SELECT语句。以下是一个简单的示例： SELECT * FROM table_n...
    99+
    2024-05-06
    sql
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作