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='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对数据进行删除和查看
删除和查看详情操作的共同语句:就是怎么显示表? 1.在主体中写表的开头行,想要显示的内容,并且加载数据也要显示的地方也建张表 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 & ...
Ajax请求数据与删除数据后刷新页面
1.ajax异步请求数据后填入模态框请求数据的按钮(HTML) <a class="queryA" href="javascript:void(0)" ...
Django-choices字段值对应关系（性别）-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07
目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型科普 Ajax 发送 GET.POST 请求的几种常见方式用 Ajax 做一个小案例准备工作动手用 Aj ...
MVC5 + EF6 + Bootstrap3 (13) 查看详情、编辑数据、删除数据
Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-rud.html 系列教程:MVC5 + EF6 + Boo ...
ajax 实现加载页面、删除、查看详细信息，以及bootstrap网页的美化
由于有些的程序员可能不是很会Photoshop,所以为了美化页面,我们可以借助工具bootstrap,实现起来相对就要比之前做的美观一些, 今天我用bootstrap把之前做的显示表格进行了一下美 ...
form表单提交数据，页面必定会刷新，ajax提交数据不会刷新，做到悄悄提交,多选删除，ajax提交实例
很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...
ajax Post数据，并得到返回结果，密码加密（Select，checkbox）
使用ajax Post数据到后台Server,并从后台返回数据给前端WEB: urls.py: from django.conf.urls import url from aptest import ...
爬虫进阶之Selenium和chromedriver,动态网页（Ajax）数据抓取
什么是Ajax: Ajax(Asynchronouse JavaScript And XML)异步JavaScript和XML.过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意 ...
ajax结合sweetalert实现删除按钮动态效果
目录一.ajax结合sweetalert实现删除按钮动态效果二.bulk_create批量插入数据 1. 一条一条插入 2. 批量插入三.自定义分页器一.ajax结合sweetalert实现删 ...

随机推荐

Notepad++-第一篇命令行语句执行之编译、运行Java
1.让Notepad++编译和运行Java,在电脑上要已经配置好了Java的开发环境 2.在Notepad++上面的选项栏中找到 Plugins--->Plugin Admin 3.在Avail ...
Appium+Python之异常自动截图
运行过程中出现异常情况,我们怎么直观的看到呢?最简单的方法就是可以把异常现象截图下来. 思路:我这里采用get_screenshot_as_file(filename)方法,filename通过获取时 ...
CVE-2016-2502-drivers/usb/gadget/f_serial.c in the Qualcomm USB driver in Android. Buffer Overflow Vulnerability reported by #plzdonthackme, Soctt.
CVE-2016-2502-drivers/usb/gadget/f_serial.c in the Qualcomm USB driver in Android.Buffer Overflow Vu ...
【摘】sizeof实现
注意sizeof是运算符,而非函数关于sizeof的两个精巧的宏实现. 非数组的sizeof: #defne _sizeof(T) ( (size_t)((T*)0 + 1)) 数组的sizeof: ...
frontend-dev面试
1.笔试题 vuex 存储的数据为null或者undefined是为啥? 1.伸缩布局 flex规则 2.横向布局的实现方法有多少? 3.说一说 flex:1; 的含义 / 说一说flex:1 1 3 ...
启动ZOOKEEPER之后能查看到进程存在但是查不到状态，是因为。。。
一般我们在启动ZOOKEEPER之后能查看到进程并且能查到每个节点的状态,但是新手偶尔会遇到查不到状态的问题,这里主要说一下我自己遇到的问题. 是因为myid重复了.... 错误:总共三个节点,mas ...
glibc2.22
Python3安装教程
目录 1. 推荐阅读 2. 安装包下载 3. 安装步骤 1. 推荐阅读 Python基础入门一文通 | Python2 与Python3及VSCode下载和安装.PyCharm破解与安装.Python ...
Maya2019下载安装与激活
目录 1. 更多推荐 2. 下载地址 2.1. OneDrive 2.2. Window (64位) 2.3. MAC_OSX 3. 安装激活教程 1. 更多推荐其他Maya版本的下载与激活:htt ...
【Leetcode周赛】比赛目录索引
contest 1 ~ contest 10: contest 11 ~ contest 20: contest 21 ~ contest 30 : https://www.cnblogs.com/z ...

Ajax对数据的删除与查看

Ajax对数据的删除与查看的更多相关文章

随机推荐

热门专题