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页面的加载数据与删除的更多相关文章

js中对arry数组的各种操作小结瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
js/jquery控制页面动态加载数据滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据滑动滚动条自动加载事件--转他人的相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多有手机的相信都见过这样 ...
ajax按楼层加载数据
代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...
瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据
瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...
Java Web SpringMVC AJAX，实现页面懒加载数据
因为做的微信端的网页,所以在显示后台数据的时候,要么分页,要么全部加载数据,开始分页对于用户来说,其实体验不是很好,毕竟要去不断的点击下一页,但是如果我把全部数据读取出来的话,但用户可能也就看前面几条 ...
巧用ajax请求服务器加载数据列表时提示loading
我们利用weui.js中的weui.loading为效果,ajax的beforeSend与complete方法,做一个加载数据时会有几秒的 loading... 要在页面需要加载的JS文件: < ...
Ajax 滚动异步加载数据
第一种情况:单个div滚动 HTML <body>  <div class="search" #if($m_ ...
[JS前端开发] js/jquery控制页面动态加载数据滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
Ajax动态滚动加载数据
看新浪微博,人人网都有这样的效果:滚动条滚动到最下面的时候,新的数据就被自动加载出来了,今天亲自尝试了一下这个效果的实现. 最开始在CSDN上写了一版,功能比较简单,今天又增加了一个小功能:翻页到指定 ...

随机推荐

thinkphp 配置项总结
'URL_PATHINFO_DEPR'=>'-',//修改URL的分隔符 'TMPL_L_DELIM'=>'<{', //修改左定界符 'TMPL_R_DELIM'=>'}&g ...
Eclipse中应用的调试
作为编程人员,程序的调试是一项基本功.在不使用IDE的时候,程序的调试多数是通过日志或者输入语句(System.out.println)的方式.可以把程序运行的轨迹或者程序运行过程中的状态显示给用户, ...
STL内存管理
1. 概述 STL Allocator是STL的内存管理器,也是最低调的部分之一,你可能使用了3年stl,但却不知其为何物. STL标准如下介绍Allocator the STL includes s ...
Spring3.2AOP实现需要添加的三个包
Spring3.2AOP实现需要添加的三个包 http://down.51cto.com/data/1001395 http://down.51cto.com/data/519542
《微信小程序七日谈》- 第六天：小程序devtool隐藏的秘密
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩: 第五 ...
SQLite:自学笔记(1)——快速入门
SQLite的安装和入门了解啥是SQLite? SQLite是一种轻巧迷你的关系型数据库管理系统.它的特点如下: 不需要一个单独的服务器进程或操作的系统(无服务器的). SQLite 不需要配置, ...
C++编程练习(7)----“KMP模式匹配算法“字符串匹配
子串在主串中的定位操作通常称做串的模式匹配. KMP模式匹配算法实现: /* Index_KMP.h头文件 */ #include<string> #include<sstream& ...
css3 3d学习心得
css3 3d学习心得卡片反转魔方 banner图首先我们要学习好css3 3d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...
Python 日志模块实例
python 打印对象的所有属性值: def prn_obj(obj): print '\n'.join(['%s:%s' % item for item in obj.__dict__.it ...
Windows|Windows Server 2003单网卡搭建VPN
1.[开始]--->[程序]--->[管理工具]--->[路由和远程访问].如下图所示: 2.选中"本地"右键"配置并启用路由和远程访问".如 ...

Ajax页面的加载数据与删除

Ajax页面的加载数据与删除的更多相关文章

随机推荐

热门专题