5月17 利用AJAX查询数据库
利用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>AJAX查询数据</title>
<script src="../jquery-1.11.2.min.js"></script>
</head>
<body>
<input type="button" value="显示数据" id="btn" />
<table id="xianshi" width="100%" cellpadding="0" cellspacing="0" border="1">
</table>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
$("#btn").click(function(){
$.ajax({
url:"chuli1.php",
dataType:"TEXT",
success: function(data){
//alert(data);
var str = "<tr><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>删除</td></tr>";
str+="<tr>";
for(var j=0;j<lie.length;j++)
{
str+="<td>"+lie[j]+"</td>";
}
str+="</tr>"
}
$("#xianshi").html(str);
}
});
})
});
</script>
</html>
处理页面：主要是讲二维数组装换成字符串的形式
<?php
include("../test0506/DBDA.class.php");
$db = new DBDA();
$sql = "select * from Nation";
$attr = $db->Query($sql);//返回一个二维数组
//将二维数组转换成字符串格式因为ajax返回的是text格式的
//echo "p001^汉族|p002^满族|p003^回族";//类似这种格式的才可以
$str = "";
foreach($attr as $v)
{
//$str = implode("^",$v);//$v里面含有一条一条的数据，列与列之间的
$str = $str.implode("^",$v);//否则等再次循环时会被替换
$str = $str."|";
}
$str = substr($str,0,strlen($str)-1);//截取字符串的长度
echo $str;
显示效果：
利用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>AJAX查询数据</title>
<script src="../jquery-1.11.2.min.js"></script>
<style type="text/css">
.shan
{
width:100px;
height:30px;
background-color:#30F;
color:#FFF;
text-align:center;
line-height:30px;
vertical-align:middle;
font-size:20px;
}
.shan:hover
{
background-color:#F63;
cursor:pointer;
}
</style>
</head>
<body>
<input type="button" value="显示数据" id="btn" />
<table id="xianshi" width="100%" cellpadding="0" cellspacing="0" border="1">
</table>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
$("#btn").click(function(){
ShowAll();
BindCK();
})
function BindCK()
{
$(".shan").click(function(){
var code = $(this).attr("bs");//获取主键值，有一个参数是获取
$.ajax({
url:"delete1.php",
data:{code:code},
dataType:"TEXT",
type:"POST",
success: function(data){
if(data.trim()=="OK")//执行获取表格的内容部分
{
ShowAll();
BindCK();
}
else
{
alert("删除失败");
}
}
});
})
}
function ShowAll()
{
$.ajax({
async:false,//变为同步，删除时使用
url:"chuli1.php",
dataType:"TEXT",
success: function(data){
//alert(data);
var str = "<tr><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>删除</td></tr>";
str+="<tr>";
for(var j=0;j<lie.length;j++)
{
str+="<td>"+lie[j]+"</td>";
}
str+="<td><div class='shan' bs='"+lie[0]+"'>删除<div></td>"; //自定义属性bs类似主键值
str+="</tr>"
}
$("#xianshi").html(str);
}
});
}
});
</script>
</html>
显示效果：
附：将AJAX中二维数组转换成字符串，封装成类
<?php
class DBDA
{
public $host = "localhost"; //服务器地址
public $uid = "root"; //数据库的用户名
public $pwd = ""; //数据库的密码
//执行SQL语句，返回相应结果的函数
//$sql是要执行的SQL语句
//$type是SQL语句的类型，0代表增删改，1代表查询
//$db代表要操作的数据库
//Ajax调用返回字符串
public function StrQuery($sql,$type=1,$db="mydb")
{
//造连接对象
$conn = new MySQLi($this->host,$this->uid,$this->pwd,$db);
//判断连接是否成功
!mysqli_connect_error() or die("连接失败！");
//执行SQL语句
$result = $conn->query($sql);
//判断SQL语句类型
if($type==1)
{
$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
{
//如果是其他语句，返回true或false
if($result)
{
return "OK";
}
else
{
return "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>
</head>
<body>
<?php
include("DBDA.php");
$db = new DBDA();
$sql = "select count(*) from Info where Code = 'p001'";
$str = $db->StrQuery($sql);
echo $str;
?>
</body>
</html>
结果是：1
