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

5月17 利用AJAX查询数据库的更多相关文章

  1. 10月17日下午MySQl数据库CRUD高级查询

    高级查询:1.连接查询 #适用于有外键关系的  没有任何关系没法用select * from Info,Nation #同时查询这俩表并把两表每个数据相互组合,形成笛卡尔积 select * from ...

  2. Mybatis学习01:利用mybatis查询数据库

    通过mybatis来操作mysql数据库的步骤大致可分为以下几步: 在这里,我们以对下面这个这个表格进行操作为例: 表名:ssm 1 配置依赖 在pom.xml中添加所需要的的依赖 <!-- m ...

  3. 利用ajax获取网页表单数据,并存储到数据库之一(使用JDBC)

    所谓JDBC就是利用java与数据库相连接的技术,从数据库获取既有的信息或者把网页上的信息存储到数据库. 这里简单的介绍公司的一个小项目中的一部分,由于代码较多,所以用图片形式进行展示.源码请查看源码 ...

  4. 【DG】利用闪回数据库(flashback)修复Failover后的DG环境

    利用闪回数据库(flashback)修复Failover后的DG环境 1.1  BLOG文档结构图 1.2  前言部分 1.2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能, ...

  5. [原创]java WEB学习笔记109:Spring学习---spring对JDBC的支持:使用 JdbcTemplate 查询数据库,简化 JDBC 模板查询,在 JDBC 模板中使用具名参数两种实现

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  6. 利用Ajax和JSON实现关于查找省市名称的二级联动功能

    功能实现的思路:我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能,我们可以利用Ajax和JSON技术模拟这个功能,说白了同样是使用Ajax的局部数据更新功能这个特性.因为省市 ...

  7. 不得不看,只有专家才知道的17个SQL查询提速秘诀!

    不得不看,只有专家才知道的17个SQL查询提速秘诀! 原创 2018-01-23 布加迪编译 51CTO技术栈 “ 除非你遵循本文介绍的这些技巧,否则很容易编写出减慢查询速度或锁死数据库的数据库代码. ...

  8. Java 通过JDBC查询数据库表结构(字段名称,类型,长度等)

    Java 通过JDBC查询数据库表结构(字段名称,类型,长度等) 发布者:唛唛家的豆子   时间:2012-11-20 17:54:02   Java 通过JDBC查询数据库表结构(字段名称,类型,长 ...

  9. sql server 查询数据库所有的表名+字段

    SELECT * FROM INFORMATION_SCHEMA.columns WHERE TABLE_NAME='Account' SELECT    (case when a.colorder= ...

随机推荐

  1. ThreadLocal使用

    ThreadLocal提供了一种访问某个变量的特殊方式:访问到的变量属于当前线程,即保证每个线程的变量不一样,而同一个线程在任何地方拿到的变量都是一致的,这就是所谓的线程隔离. 如果要使用Thread ...

  2. Kubernetes相关概念

    This page explains how Kubernetes objects are represented in the Kubernetes API, and how you can exp ...

  3. GTK 菜单的创建详解

    1 定义 1.1 菜单由菜单条和菜单项组成,它们的定义如下所示: 菜单项(GtkMenuItem):添加到菜单条或下拉菜单中构件 顶层菜单项:添加到菜单条上的菜单项称为顶层菜单项 下拉菜单(GtkMe ...

  4. HDU 1251 统计难题(字典树模板题)

    http://acm.hdu.edu.cn/showproblem.php?pid=1251 题意:给出一些单词,然后有多次询问,每次输出以该单词为前缀的单词的数量. 思路: 字典树入门题. #inc ...

  5. BZOJ 2002: [Hnoi2010]Bounce 弹飞绵羊(分块)

    http://www.lydsy.com/JudgeOnline/problem.php?id=2002 题意: 思路:不会LCT,就只好用分块了. 将这n个数分成根号n块,对于每一块中的每一个数,处 ...

  6. 关于PS抠图的各种方法 有这个就可以去面试了!!!加油!!!

    今天和大家说说关于PS抠图的方法 高手也就如此  你值得拥有!!好了 废话不多说 下面进入正题 首先:我们得分析所给的图 然后运用不同的方法,当然也可以相互灵活运用 1:不抠图 2:万能抠图方法:快速 ...

  7. Hadoop大数据分析应用场景

    J 为了满足日益增长的业务变化,京东的京麦团队在京东大数据平台的基础上,采用了hadoop等热门的开源大数据计算引擎,打造了一款为京东运营和产品提供决策性的数据类产品-北斗平台. 一.Hadoop的应 ...

  8. 大数据新手之路四:联合使用Flume和Kafka

    Ubuntu16.04+Kafka1.0.0+Flume1.8.0 1.目标 ①使用Flume作为Kafka的Producer: ②使用Kafka作为Flume的Sink: 其实以上两点是同一个事情在 ...

  9. Codeforces 981 E - Addition on Segments

    E - Addition on Segments 思路: dp dp[i]表示构成i的区间的右端点 先将询问按r排序 然后,对于每次询问,每次枚举 i 从 n-x 到 1,如果dp[i] >= ...

  10. Jmeter 接口测试知识梳理——应用基础篇

    Jmeter 使用也有很长时间了,但是一直没有做一下知识梳理,近期会对公司同事做一下这方面的培训,借此机会,把使用过程中应用到的知识,或是遇到的问题,整理出来,方便大家学习! Jmeter 接口测试知 ...