Ajax删除数据与查看数据操作

2024-10-20 15:49:15

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='button' ids='"+lie[0]+"' class='sc' value='删除' />" +
          //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='{$ids}'";
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='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删除数据与查看数据操作，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

Ajax遍历jSon后对每一条数据进行相应的修改和删除(代码分享)

废话不多说了,直接给大家贴代码了,具体代码如下所示: $.ajax({ url: "/business/findpersons.json", dataType: "json", type:"GET", success: function(doc) { var objs=eval(doc); for (var i = 0; i < objs.length; i++){ var personid=objs[i].personId; var na
Ajax添加数据与删除篇实现代码

如果你真的把前几篇掌握了．实现ajax删除功能会易如反常．我所要教你的是．灵活利用JavaScript和Dom来实现一个酷酷的删除效果．其实你学习到这里．已经能够明白,在ajax技术中那些被请求的服务端网页,在非ajax应用中并无太大区别．无非也是接受前端发过来的请求．在后台执行一些操作而已!学习完这篇教程以后．你会明白想要实现够炫够酷的的ajax效果．你必须要熟练掌握JavaScript Dom 这些技术精通．刚刚我喝多了,上面的这段话是我在两天前就写好的．我本来想直接睡觉的．但我想试试．
Ajax方式删除表格一行数据示例代码

复制代码代码如下: /** * Ajax方式删除信息--后台数据 * * action * id 主键值 * obj 删除行的<a> */ function removeRow(action,id,obj){ if(confirm('确定要删除吗?')){ Ext.Ajax.request({ url : encodeURI("alone.portal?.f=${namespace}&.pmn=view&action="+action), params :
PHP+ajax 无刷新删除数据

首先本例基于留言本整理版修改. 我们使用了jquery.js来实现ajax和dom删除首先加入复制代码代码如下: <script type="text/javascript" src="lib/jquery.js"></script> 给table加个复制代码代码如下: id="t" 写个js: 复制代码代码如下: <script> function d
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能

建议有js基础,了解jquery,thinkphp,废话不说多下面就上代码 <----HTML----> //thinkphp循环显示把data里fid赋予多选框 <volist name="data" id="vo"> <tr> <td><input type="checkbox" value="{$vo.fid}"/></td>//可在后面加td输入参
Ajax删除数据与查看数据操作

1.数据库找一张表: 颜色表 2.主页面主页面的代码用到tbody: TBODY作用是: 可以控制表格分行下载,从而提高下载速度. (网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部分内容,这样会减少用户等待时间. 使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示,就是说如果有多个行,那么如果得到一个TBODY行,就可以先显示一行. BODY是HTML的文本体,一个HTML文件,只有一个BODY,而在TABLE中可以有多个TBODY. T
在pycharm中debug 实时查看数据操作(交互式)

用pycharm进行debug ① 直接在代码中设断点(点击代码的左边) ②右击点击debug 有几种debug方式,我们可以在pycharm的下方中的debugger进行选择 ①step over 单步运行即一行一行代码运行 ②step into ③ step into my code 跳到函数中运行交互式查看结果第一步:点击pycharm下方的console 第二步:点击show Python plompt 这样就可以看到交互式界面啦然后我们直接输入变量就可以查看结果了停止debu
bootstrapTable+ajax加载数据 refresh更新数据

本文实例为大家分享了bootstrapTable+ajax加载数据,和refresh更新数据两部分,供大家参考,具体内容如下 1.html <form class="form-horizontal" role="form"> <div class="form-group"> <label for="calendar" class="col-sm-1 control-label"
php+jQuery ajax实现的实时刷新显示数据功能示例

本文实例讲述了php+jQuery ajax实现的实时刷新显示数据功能.分享给大家供大家参考,具体如下: 创建数据表:demo -- -- 表的结构 `demo` -- CREATE TABLE IF NOT EXISTS `demo` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) COLLATE utf8_bin NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CH
mysql数据库创建账号、授权、数据导出、导入操作示例

本文实例讲述了mysql数据库创建账号.授权.数据导出.导入操作.分享给大家供大家参考,具体如下: 1.账号创建及授权 grant all privileges on *.* to 'yangxin'@'%' identified by 'yangxin123456' with grant option; privileges:表示将所有权限授予给用户.也可指定具体的权限,如:SELECT.CREATE.DROP等. on:表示这些权限对哪些数据库和表生效,格式:数据库名.表名,这里写"*&qu
MySQL 表数据的导入导出操作示例

本文实例讲述了MySQL 表数据的导入导出操作.分享给大家供大家参考,具体如下: 数据导出 1. 使用 SELECT ...INTO OUTFILE ...命令来导出数据,具体语法如下. mysql> SELECT * FROM tablename INTO OUTFILE 'target_file' [option]; 其中 option 参数可以是以下选项: FIELDS TEMINATED BY 'string' (字符分断符) FIELDS [OPTIONALLY] ENCLOSED
jquery 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> <title>&l
AJAX for PHP简单表数据查询实例

功能介绍:AJAX WebShop 3从Beta2开始支持PHP的开发了,AJAX WebShop集成了PHP5的开发环境,因此不需要额外安装配置PHP,本例将实现一个AJAX for PHP的简单数据查询操作,这个例子是单表操作,也可以实现主从表的数据查询. 一.数据表说明例子采用了Access数据库,当然你也可以使用mysql 或其他类型数据库,数据库名称为:demo.mdb,表名为product,创建字段分别是PRODUCT_ID, PRODUCT_NAME, PRODUCT_PRICE
MySQL 删除数据库中重复数据方法小结

刚开始,根据我的想法,这个很简单嘛,上sql语句 delete from zqzrdp where tel in (select min(dpxx_id) from zqzrdp group by tel having count(tel)>1); 执行,报错!!~!~ 异常意为:你不能指定目标表的更新在FROM子句.傻了,MySQL 这样写,不行,让人郁闷. 难倒只能分步操作,蛋疼以下是网友写的,同样是坑爹的代码,我机器上运行不了. 1. 查询需要删除的记录,会保留一条记录. select
Python数据报表之Excel操作模块用法分析

本文实例讲述了Python数据报表之Excel操作模块用法.分享给大家供大家参考,具体如下: 一点睛 Excel是当今最流行的电子表格处理软件,支持丰富的计算函数及图表,在系统运营方面广泛用于运营数据报表,比如业务质量.资源利用.安全扫描等报表,同时也是应用系统常见的文件导出格式,以便数据使用人员做进一步加工处理.利用Python操作Excel的模块XlsxWriter(https://xlsxwriter.readthedocs.org),可以操作多个工作表的文字.数字.公式.图表等. 二

Ajax删除数据与查看数据操作

相关推荐

随机推荐