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

<style type="text/css">

.sc

{

    width:70px;

    height:30px;

    background-color:#06F;

    color:#FFF;

    text-align:center;

    line-height:30px;

    vertical-align:middle;

    font-size:18px;

}

.sc:hover{ cursor:pointer;

background-color:#F60;}

</style>

</head>

<body>

<input type="button" id="btn" value="显示数据" />

<table id="xianshi" width="100%" border="1" cellpadding="0" cellspacing="0">

</table>

</body>

</html>

<script type="text/javascript">

$(document).ready(function(e) {

    $("#btn").click(function(){

            ShowAll();

            Bindsc();

        })

        function Bindsc()   //绑定删除事件

        {

            $(".sc").click(function(){

                var code = $(this).attr("bs");  //获取主键值

                $.ajax({

                    url:"Delete.php",

                    data:{code:code},

                    type:"POST",

                    dataType:"TEXT",

                    success: function(data){

                        if(data.trim()=="OK")

                        {

                            //删除成功后再执行一遍显示全部信息与绑定删除事件的方法，这样就不用刷新页面了

                            ShowAll();

                            Bindsc();       //调用自身方法，因为是在点击删除的时候才执行，所以不会无限循环

                        }

                        else

                        {

                            alert( "删除失败！");

                        }

                        }                

                    });

                })

        }    

    function ShowAll()  //显示全部信息

    {

        $.ajax({

            async:false,     //AJAX必须同步，显示完信息再绑定删除事件

            url:"ChuLi.php",

            dataType:"TEXT",   //AJAX返回的数据类型是"TEXT"就必须返回字符串

            success: function(data){

                var str = "<tr><td>代号</td><td>姓名</td><td>性别</td><td>民族</td><td>生日</td><td>操作</td></tr>";

                //将返回的字符串拆分成数组

                var hang = data.split("|");

                    for(var i=0;i<hang.length;i++)

                    {

                        var lie = hang[i].split("^");

                        /*str+="<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+

                        "</td><td>"+lie[4]+"</td><td></td></tr>";*/

                        //字符串太长，显得很乱，像这种列数比较多的可以嵌套循环

                        str+="<tr>";

                        for(var j=0;j<lie.length;j++)

                        {

                            str+="<td>"+lie[j]+"</td>";

                        }

                        str+="<td><div class='sc' bs='"+lie[0]+"'>删除</div></td>";  //添加的bs属性存储主键值

                        str+="</tr>";

                    }

                    $("#xianshi").html(str);

                }    

            });

    }    

});

</script>

显示信息处理页面：

<?php

include("../DB.class.php");

$db = new DB();

$sql = "select * from Info";

$attr = $db->Query($sql);

/*返回二维数组，因为返回数据类型是"TEXT"，所以要将二维数组变为字符串，二维数组格式如下：

p001 张三

p002 李四

p003 王五

将列之间用"^"拼接，行之间用"|"拼接，格式如下：

echo "p001^张三|p002^李四|p003^王五";*/

$str="";  //先定义字符串，后面要用

foreach($attr as $v)

{

    $str =$str.implode("^",$v);    //每一列之间用"^"拼接

    $str = $str."|";            //循环完一行后面加上"|"

}

$str = substr($str,0,strlen($str)-1);  //将最后面的"|"截掉

echo $str;

//调用AJAX返回字符串的方法

echo $db->StrQuery($sql);

删除事件处理页面：

<?php

$code = $_POST["code"];

include("../DB.class.php");

$db = new DB();

$sql = "delete from Info where Code = '{$code}'";

$r = $db->Query($sql,1);

if($r)

{

    echo "OK";

}

else

{

    echo "NO";

}

注意：本例中删除事件用的是div，当然也可以用<a></a>、button等，但因为要删除数据，所以需要主键值，这就要求div中要存储主键值，所以在div中自定义一个属性bs用来存储主键值。

注意：有些方法调用自身会无限循环，例如：

<script type="text/javascript">

function Test()

    {

        alert("aa");

        Test();

    }

</script>

本例中调用自身方法，因为是在点击删除的时候才执行，所以不会无限循环

调用AJAX返回字符串的方法封装到数据库类里面：

class DB

{

    public $host="localhost";  //服务器地址     默认值为localhost

    public $uid="root";        //数据库用户名  默认值为root

    public $pwd="123";    //数据库密码    默认值为123

        //AJAX调用返回字符串

    //用聚合函数时返回字符串比较方便

    public function StrQuery($sql,$type=0,$db="mydb")

    {

        //1.造连接对象

        $conn = new MySQLi($this->host,$this->uid,$this->pwd,$db);

        //2.判断连接是否出错

        !mysqli_connect_error() or die("连接失败！");

        //3.执行SQL语句

        $result=$conn->query($sql);

        //4.判断语句类型

        if($type==0)

        {

            $attr = $result->fetch_all();            //返回二维数组

            $str = "";

            //如果是查询语句，返回字符串

            for($i=0;$i<count($attr);$i++)

            {

                for($j=0;$j<count($attr[$i]);$j++)

                {

                    $str=$str.$attr[$i][$j];

                    $str= $str."^";                     //每一列后面拼接"^"

                }

                $str=substr($str,0,strlen($str)-1);  //把最后的"^"截掉

                $str=$str."|";                       //每一行后面拼接"|"

            }

            $str=substr($str,0,strlen($str)-1);      //把最后的"|截掉"

            return $str;                             //返回字符串

        }

        else    //如果是其他语句

        {

            if($result)

            {

                echo "OK";

            }

            else

            {

                echo "NO";

            }

        }

    }

}

在用聚合函数查询时，StrQuery()比较方便，直接输出字符串即可：

<?php

include("../DB.class.php");

$db = new DB();

$sql = "select count(*) from Info where Code = 'p001'";

//用Query()方法

$attr = $db->Query($sql);

echo $attr[0][0];

//用StrQuery()方法

echo $db->StrQuery($sql);

数据库类里面可以多封装一些方法，用熟之后可以很方便的根据需要调用相应方法

AJAX的应用的更多相关文章

  1. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  2. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  3. 一个粗心的Bug，JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  4. ABP文档 - Javascript Api - AJAX

    本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...

  5. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  6. 调用AJAX做登陆和注册

    先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...

  7. Ajax 概念 分析 举例

    Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...

  8. ajax

    常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...

  9. 学习笔记之MVC级联及Ajax操作

    由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...

  10. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

随机推荐

  1. 推荐个强大的任务管理器-Process Hacker

    软件主页及下载: http://processhacker.sourceforge.net/index.php 之前一直用process explorer 功能一样强大,但是process hacke ...

  2. python 分支结构

    if 语句 if语句 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. 比如,输入用户年龄,根据年龄打印不同的内容,在Python程序中,可以用if语句实现: age = 20 if ag ...

  3. 易于同其它View框架（Tiles等）无缝集成，采用IOC便于测试

    Lifecycle for overriding binding, validation, etc,易于同其它View框架(Tiles等)无缝集成,采用IOC便于测试. 它是一个典型的教科书式的mvc ...

  4. 认识oracle的update更新

    这两天给新同事安排了一个工作,即做一个update 的级联更新,在实际操作中发现了一个问题.就是对于Oracle的更新的语法,大部分人尤其是学过SqlServer的人在使用oracle的时候对于ora ...

  5. snap方式nextcloud安装笔记

    官方安装文档:https://docs.nextcloud.com/server/12/admin_manual/installation/source_installation.html#examp ...

  6. java 签名类 Signature

    java.security类 Signature java.lang.Object java.security.SignatureSpi java.security.Signature public ...

  7. 【BZOJ4810】[Ynoi2017]由乃的玉米田 bitset+莫队

    [BZOJ4810][Ynoi2017]由乃的玉米田 Description 由乃在自己的农田边散步,她突然发现田里的一排玉米非常的不美.这排玉米一共有N株,它们的高度参差不齐.由乃认为玉米田不美,所 ...

  8. confluence数据备份

    上篇文章总结了confluence的docker-compose的搭建,但是考虑到数据安全性问题,需要最数据库进行备份 因为mysql的data目录已经挂载到宿主机,所以直接对mysql容器的宿主机进 ...

  9. jQuery实现局部刷新页面数据绑定

    今天遇到了一个问题:怎么样才能做到只刷新页面中的Repeater控件中的数据,在不用UploadPannel的情况下? 试了好多方法,无意间在看jquery文件时发现,使用load()方法即可解决此问 ...

  10. C语言-数组篇

    C语言数组 一.数组的概念 用来存储一组数据的构造数据类型 特点:只能存放一种类型的数据,如全部是int型或者全部是char型,数组里的数据成为元素. 二.数组的定义 格式: 类型 数组名[元素个数] ...