Ajax删除数据与查看数据操作的步奏详解-js教程-PHP中文网

首页

web前端

js教程

Ajax删除数据与查看数据操作的步奏详解

php中世界最好的语言

Apr 02, 2018 am 11:20 AM

ajax 删除查看

这次给大家带来Ajax删除数据与查看数据操作的步奏详解，Ajax删除数据与查看数据操作的注意事项有哪些，下面就是实战案例，一起来看一下。

1.数据库找一张表：

颜色表

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>
<h1>显示数据</h1>
<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>

登录后复制

图：

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

接着是加载页面：

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

<?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;

登录后复制

来看一下输出的是什么：

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

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

登录后复制

再来看：

现在来写回调函数：

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

登录后复制

写完看下页面：

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

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

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

登录后复制

给删除按钮添加事件，并调用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=&#39;{$ids}&#39;";
if($db ->Query($sql,0))
{
  echo "ok";
}
else{
  echo "no";
}

登录后复制

这样来看：

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

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

主页面代码：

<!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>
<h1>显示数据</h1>
<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=&#39;button&#39; ids=&#39;" + lie[0] + "&#39; class=&#39;sc&#39; value=&#39;删除&#39; />" +
            //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=&#39;{$ids}&#39;";
if($db ->Query($sql,0))
{
  echo "ok";
}
else{
  echo "no";
}

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7695

Java教程

1640

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

微信拉黑再删除永久加不上是真的吗 Apr 08, 2024 am 11:41 AM

1、首先，拉黑再删除永久加不上是假的，拉黑删除后想要再加对方，只要对方同意即可。2、如果用户将某人拉黑，对方将无法向用户发送消息、查看用户的朋友圈以及与用户进行通话。3、拉黑并不意味着将对方从用户的微信联系人列表中删除。4、如果用户在拉黑后又将对方从用户的微信联系人列表中删除，那么在删除后是没有办法恢复的。5、如果用户想再次添加对方为好友，需要对方同意并重新添加用户。

抖音查看删除登录设备的操作步骤 Mar 26, 2024 am 09:01 AM

1、首先点击打开抖音app，点击【我】。2、点击右上方三点的图标。3、点击进入【设置】。4、点击打开【帐号与安全】。5、选择点击【登录设备管理】。6、最后点击选择其中的设备，点击【移除】即可。

小红书把别人评论删了怎么找回？把别人评论删了会有显示吗？ Mar 21, 2024 pm 10:46 PM

小红书作为一款热门的社交电商平台，用户之间的互动评论是平台中不可或缺的交流方式。有时候，我们可能会发现自己的评论被其他人删除，这种情况可能会让我们感到困惑。一、小红书把别人评论删了怎么找回？当发现自己的评论被删除时，首先可以尝试在平台上直接搜索相关的帖子或商品，查看是否还能找到该评论。如果评论被删除后仍然显示，那么可能是被原帖主删除的，这时候可以尝试联系原帖主，询问其删除评论的原因，并请求恢复评论。如果评论已经被完全删除且无法在原帖上找到，那么在平台上恢复评论的机会相对较小。可以尝试使用其他途径

抖音聊天记录怎么彻底消除干净 May 07, 2024 am 11:14 AM

1、打开抖音app，点击界面底部的【消息】，点击需要删除的聊天对话入口。2、长按任意一条聊天记录，点击【多选】，勾选想要删除的聊天记录。3、点击右下角的【删除】按钮，在弹出的窗口中选择【确认删除】即可将这些记录永久删除。

抖音上如何发给别人文件？上发给别人文件怎么删除？ Mar 22, 2024 am 08:30 AM

在抖音上，用户不仅可以分享自己的生活点滴和才艺，还可以和其他用户互动交流。在这个过程中，有时候我们需要向其他用户发送文件，比如图片、视频等。那么，在抖音上如何发给别人文件呢？一、抖音上如何发给别人文件？1.打开抖音，进入你想要发送文件的聊天界面。2.点击聊天界面中的“+”号，选择“文件”。3.在文件选项中，你可以选择发送图片、视频、音频等文件。选择你想要发送的文件后，点击“发送”。4.等待对方接受你的文件，一旦对方接受，文件就会传输成功。二、抖音上发给别人文件怎么删除？1.打开抖音，进入你发送文

PHP实用技巧：删除代码中的最后一个分号 Mar 27, 2024 pm 02:24 PM

PHP实用技巧：删除代码中的最后一个分号在编写PHP代码时，常常会遇到需要删除代码中最后一个分号的情况。这可能是因为复制粘贴引入了多余的分号，或者为了优化代码风格和结构。在本文中，我们将介绍一些方法来删除PHP代码中的最后一个分号，并且提供具体的代码示例。方法一：使用substr函数substr函数可以从字符串中返回指定长度的子字符串。我们可以

网易云音乐在哪查看音乐排行榜_网易云音乐查看音乐排行榜方法 Mar 25, 2024 am 11:40 AM

1、打开手机后，选择网易云音乐。2、进入到首页后，大家就可以看到【排行榜】，点击进入。3、在排行榜中，可以选择任意榜单，点击【新歌榜】。4、选择自己喜欢的歌曲，并进行点击。5、返回上一页，可以看到更多的榜单。

闲鱼怎么查看自己的id_闲鱼个人昵称查看方法介绍 Mar 22, 2024 am 08:21 AM

闲鱼作为一款交易平台，使用之前都需要先注册和登录自己的账号，用户可以为自己的账号设置id名称，如果想查看自己的id是什么怎么办呢？下面就来一起了解一下吧！闲鱼个人昵称查看方法介绍首先启动闲鱼应用，进入首页后，通过切换到卖闲置、消息、我的页面，点击右下角的【我的】选项。2、然后在我的页面中我们需要点击左上角的【头像】；2、接着来到个人主页的页面中可以看到不同的信息，我们需要在这里点击【编辑资料】按钮；4、最后点击过后在编辑资料的页面中我们就可以看到了；

See all articles

Ajax删除数据与查看数据操作的步奏详解

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题