用AJAX实现数据显示与删除事件

主页面：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script src="../jquery-1.11.2.min.js"></script>
  7. <style type="text/css">
  8. .sc
  9. {
  10.     width:70px;
  11.     height:30px;
  12.     background-color:#06F;
  13.     color:#FFF;
  14.     text-align:center;
  15.     line-height:30px;
  16.     vertical-align:middle;
  17.     font-size:18px;
  18. }
  19. .sc:hover{ cursor:pointer;
  20. background-color:#F60;}
  21. </style>
  22. </head>
  23.  
  24. <body>
  25. <input type="button" id="btn" value="显示数据" />
  26. <table id="xianshi" width="100%" border="1" cellpadding="0" cellspacing="0">
  27. </table>
  28. </body>
  29. </html>
  30. <script type="text/javascript">
  31. $(document).ready(function(e) {
  32.  
  33.     $("#btn").click(function(){
  34.             ShowAll();
  35.             Bindsc();
  36.         })
  37.  
  38.         function Bindsc()   //绑定删除事件
  39.         {
  40.             $(".sc").click(function(){
  41.                 var code = $(this).attr("bs");  //获取主键值
  42.                 $.ajax({
  43.  
  44.                     url:"Delete.php",
  45.                     data:{code:code},
  46.                     type:"POST",
  47.                     dataType:"TEXT",
  48.                     success: function(data){
  49.  
  50.                         if(data.trim()=="OK")
  51.                         {
  52.                             //删除成功后再执行一遍显示全部信息与绑定删除事件的方法，这样就不用刷新页面了
  53.                             ShowAll();
  54.                             Bindsc();       //调用自身方法，因为是在点击删除的时候才执行，所以不会无限循环
  55.                         }
  56.                         else
  57.                         {
  58.                             alert( "删除失败！");
  59.                         }
  60.  
  61.                         }                
  62.  
  63.                     });
  64.                 })
  65.         }    
  66.  
  67.     function ShowAll()  //显示全部信息
  68.     {
  69.         $.ajax({
  70.             async:false,     //AJAX必须同步，显示完信息再绑定删除事件
  71.             url:"ChuLi.php",
  72.             dataType:"TEXT",   //AJAX返回的数据类型是"TEXT"就必须返回字符串
  73.             success: function(data){
  74.                 var str = "<tr><td>代号</td><td>姓名</td><td>性别</td><td>民族</td><td>生日</td><td>操作</td></tr>";
  75.                 //将返回的字符串拆分成数组
  76.                 var hang = data.split("|");
  77.                     for(var i=0;i<hang.length;i++)
  78.                     {
  79.                         var lie = hang[i].split("^");
  80.                         /*str+="<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+
  81.                         "</td><td>"+lie[4]+"</td><td></td></tr>";*/
  82.                         //字符串太长，显得很乱，像这种列数比较多的可以嵌套循环
  83.                         str+="<tr>";
  84.                         for(var j=0;j<lie.length;j++)
  85.                         {
  86.                             str+="<td>"+lie[j]+"</td>";
  87.                         }
  88.                         str+="<td><div class='sc' bs='"+lie[0]+"'>删除</div></td>";  //添加的bs属性存储主键值
  89.                         str+="</tr>";
  90.                     }
  91.                     $("#xianshi").html(str);
  92.  
  93.                 }    
  94.  
  95.             });
  96.     }    
  97.  
  98. });
  99. </script>

显示信息处理页面：

  1. <?php
  2. include("../DB.class.php");
  3. $db = new DB();
  4. $sql = "select * from Info";
  5. $attr = $db->Query($sql);
  6. /*返回二维数组，因为返回数据类型是"TEXT"，所以要将二维数组变为字符串，二维数组格式如下：
  7. p001 张三
  8. p002 李四
  9. p003 王五
  10.  
  11. 将列之间用"^"拼接，行之间用"|"拼接，格式如下：
  12.  
  13. echo "p001^张三|p002^李四|p003^王五";*/
  14.  
  15. $str="";  //先定义字符串，后面要用
  16. foreach($attr as $v)
  17. {
  18.     $str =$str.implode("^",$v);    //每一列之间用"^"拼接
  19.     $str = $str."|";            //循环完一行后面加上"|"
  20. }
  21. $str = substr($str,0,strlen($str)-1);  //将最后面的"|"截掉
  22. echo $str;
  23.  
  24. //调用AJAX返回字符串的方法
  25. echo $db->StrQuery($sql);

删除事件处理页面：

  1. <?php
  2. $code = $_POST["code"];
  3. include("../DB.class.php");
  4. $db = new DB();
  5. $sql = "delete from Info where Code = '{$code}'";
  6.  
  7. $r = $db->Query($sql,1);
  8. if($r)
  9. {
  10.     echo "OK";
  11. }
  12. else
  13. {
  14.     echo "NO";
  15. }

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

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

  1. <script type="text/javascript">
  2. function Test()
  3.     {
  4.         alert("aa");
  5.         Test();
  6.     }
  7.  
  8. </script>

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

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

  1. class DB
  2. {
  3.     public $host="localhost";  //服务器地址     默认值为localhost
  4.     public $uid="root";        //数据库用户名  默认值为root
  5.     public $pwd="123";    //数据库密码    默认值为123
  6.         //AJAX调用返回字符串
  7.     //用聚合函数时返回字符串比较方便
  8.     public function StrQuery($sql,$type=0,$db="mydb")
  9.     {
  10.         //1.造连接对象
  11.         $conn = new MySQLi($this->host,$this->uid,$this->pwd,$db);
  12.         //2.判断连接是否出错
  13.         !mysqli_connect_error() or die("连接失败！");
  14.         //3.执行SQL语句
  15.         $result=$conn->query($sql);
  16.         //4.判断语句类型
  17.         if($type==0)
  18.         {
  19.             $attr = $result->fetch_all();            //返回二维数组
  20.             $str = "";
  21.             //如果是查询语句，返回字符串
  22.             for($i=0;$i<count($attr);$i++)
  23.             {
  24.                 for($j=0;$j<count($attr[$i]);$j++)
  25.                 {
  26.                     $str=$str.$attr[$i][$j];
  27.                     $str= $str."^";                     //每一列后面拼接"^"
  28.                 }
  29.                 $str=substr($str,0,strlen($str)-1);  //把最后的"^"截掉
  30.                 $str=$str."|";                       //每一行后面拼接"|"
  31.             }
  32.             $str=substr($str,0,strlen($str)-1);      //把最后的"|截掉"
  33.             return $str;                             //返回字符串
  34.  
  35.         }
  36.         else    //如果是其他语句
  37.         {
  38.             if($result)
  39.             {
  40.                 echo "OK";
  41.             }
  42.             else
  43.             {
  44.                 echo "NO";
  45.             }
  46.         }
  47.     }
  48.  
  49. }

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

  1. <?php
  2. include("../DB.class.php");
  3. $db = new DB();
  4. $sql = "select count(*) from Info where Code = 'p001'";
  5. //用Query()方法
  6. $attr = $db->Query($sql);
  7. echo $attr[0][0];
  8. //用StrQuery()方法
  9. 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. MAC与PHY连接的管理接口MDIO

    MII Management interface用于MAC层或其他控制芯片(不一定是MAC层芯片,可能是MCU,如高通芯片建构中,1个MAC芯片可以控制2个PHY芯片,然后MCU控制3个网卡(MAC+ ...

  2. 内核交互--sysfs

    文档介绍:http://lxr.linux.no/linux+v2.6.37/Documentation/filesystems/sysfs.txt The sysfs Filesystem Sysf ...

  3. PHP基础之Autoload

    PHP的自动加载autoload机制很重要,这里做2个小练习 原创文章,转载请注明:http://www.cnblogs.com/phpgcs 文件结构如下,2种方式实现自动加载 1,自定义函数 2, ...

  4. js实现pdf对页面的打印

    //-------------------------------点击打印的图标--------------------------------- <div class="dcsc&q ...

  5. jQuery实现限制文本框的输入长度

    jQuery限制文本框输入,包含粘贴. //限制文本框的输入长度 $(function () {  $(document).on("keypress", ".txt-va ...

  6. WPF命令绑定 自定义命令

    WPF的命令系统是wpf中新增加的内容,在以往的winfom中并没有.为什么要增加命令这一块内容.在winform里面的没有命令只使用事件的话也可以实现程序员希望实现的功能.这个问题在很多文章中都提到 ...

  7. Android Studio Error -- Could not create the Java Virtual Machine

    :app:dexDebug Error: Could not create the Java Virtual Machine. Error: A fatal exception has occurre ...

  8. ios -完全实现代码设置 Could not find a storyboard named 'Main' in bundle NSBundle

    UIWindow *windows = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds]; windows.background ...

  9. 一张图玩转H5测试

    背景 随着各种H5页面的普及和运用,并深深的影响着我们各个业务的发展,前两年也对H5测试的有着不少积累,但都是根据项目的要求,这里测试下,那里测试下,今年上半年专门成立了H5测试研究虚拟小组,专门研究 ...

  10. 关东升的《从零开始学Swift》即将出版

    大家好: 苹果2015WWDC大会发布了Swift2.0,它较之前的版本Swift1.x有很大的变化,所以我即将出版<从零开始学Swift> <从零开始学Swift>将在< ...