用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. mysql workbench 导出表结构

    Server->Data Export 选择数据库(我的是 lhc库) -> 选择对应表(我的是  device表), Dump Structre and Data 导出表数据和表结构 D ...

  2. string::find_last_of

    今天在代码中用到string的这个方法,一不小心就用错了. 这是http://www.cplusplus.com/关于这个方法的解释. Find character in string from th ...

  3. 使用加密的squid配合stunnel实现HTTP代理

    现在大部分人都是用ssh tunnel来搭建socks5代理,其实这种方式效率并不高,ssh tunnel并不是为了做代理而存在的.一个比较好的方法是加密squid配合stunnel实现http代理. ...

  4. linux 学习笔记1

    1.IDE硬盘        /dev/hd[a-d]                   IDE1  主  /dev/hda   从 /dev/hdb          IDE2        主 ...

  5. java数据结构之枚举

    Enumeration接口中定义了一些方法,通过这些方法可以枚举(一次获得一个)对象集合中的元素. import java.util.Vector; import java.util.Enumerat ...

  6. Convert.ToInt32(string '000000003') 变成了 3

    Convert.ToInt32(string '000000003') 变成了 3 但是在查询的时候需要用的是string 这里的convert.toint32 反而起了坏作用,不是所有的时候都要用c ...

  7. 摄像机互联网直播之EasyCloud云平台与EasyNVS云端管控的全局对比

    背景分析 近期,Easy系列推出了EasyNVS,在功能上也是可以满足将内网的视频直播转发到公网,再由公网进行视频流的分发. 听起来和EasyCloud功能上是冲突的,其实两者之间的差别还是存在的,本 ...

  8. Ajax 处理json的方法不同

    json字符串从从后台传递到前台的方法有两种 1.使用context.Response(); 2.使用webmethod 方法调用静态函数 返回的字符串 前者返回的json是obj类型,而后者返回的是 ...

  9. if you have content fetched asynchronously on pages where SEO is important, SSR might be necessary

    if you have content fetched asynchronously on pages where SEO is important, SSR might be necessary

  10. git commit -a -m "DM 1、获取aliOssSTS值,计算签名,实现视频PUT/POST2种上传方式上传;"

    git commit -a -m "DM 1.获取aliOssSTS值,计算签名,实现视频PUT/POST2种上传方式上传:" 微信小程序的视频上传