简单的jQuery练习-Ajax,CSS和PHP结合
2011-10-26 22:17
351 查看
这个几天,学习HTML5,CSS3,json,javascript,Ajax和jQuery的东西,看着看着,忽然想写点东西练习一下,通过数据库取出数据并按照一定样式显示出来,编程环境为Xampp 1.7.7,DW CS5,Zend Studio 8,测试浏览器 IE9,FF 7.0.1, chrome 14
使用到的jQuery 1.6.4 可以到这里下http://www.jquery.org
火狐浏览器效果图(注意:部分文字不想公开,故意造成乱码)
因为使用的是Mysql,语法与MSSQL 有所不同,创建例子数据库和例子数据表:
CREATE TABLE Project201109 (
IDint NOT NULL AUTO_INCREMENT PRIMARY KEY,
Projectvarchar(255) NULL,
ProjectCodevarchar(255) NULL,
Customervarchar(255) NULL,
HasContractvarchar(255) NULL,
Zonevarchar(255) NULL,
IsMaintainvarchar(255) NULL,
Acceptancedatetime NULL,
EquipmentContractsOverdatetime NULL,
EquipmentContractsNotevarchar(255) NULL,
MaintainContractsOverdatetime NULL,
MaintainContractsNotevarchar(255) NULL,
NumOfSettlementint NULL,
Teamvarchar(255) NULL,
MaintainLeveint NULL,
ServiceLevechar(10) NULL,
MaintenanceLevelchar(10) NULL,
Contractvarchar(255) NULL,
CleanNotevarchar(255) NULL,
InspectionCyclevarchar(255) NULL,
ResponseTimevarchar(255) NULL,
ArrivalTimevarchar(255) NULL,
ProvideTimevarchar(255) NULL,
ReportCyclevarchar(255) NULL,
ContractsNotevarchar(255) NULL,
ProjectTypevarchar(255) NULL,
CleaningInspectionCyclevarchar(50) NULL,
NextServiceTimedatetime NULL,
CleaningInspectionNotevarchar(50) NULL,
IsCleamAmountint NULL,
SumOfint NULL,
ScopeOfmaintenancevarchar(255) NULL,
ContractCodeint NULL,
ContractMarkint NULL
) CHARACTER SET utf8
数据录入就省略,数据存储,传递,页面显示全程使用utf8编码。
使用PHP访问mysql数据库非常容易,简单几句就可以实现。
<?php
//读取页面请求的参数id,这个由js的Ajax发送过来的,在后面会说到。
$id=$_POST['id'];
//连接192.168.1.102服务器,输入用户名和密码
$conn = mysql_connect("192.168.1.102","<login user>","<password>") ordie
("Unseccessful");
//如果你发现显示乱码,这句很重要。
mysql_query("SET NAMES 'utf8'");
//连接test数据库
mysql_select_db("test",$conn);
//刚才POST过来一个id值,在这里使用到了,从数据库取出大于等于id的前五条数据
$sql="select * from Project201109 where id>=".$id." limit5";
//获取数据集
$query=mysql_query($sql,$conn) or die("Query to get blah failed with error: ".mysql_error());
/* 数据返回HTML头,指定utf-8编码和内容类型,以json格式,注意Content-Type值,否则接收json数据时编码出错 */
header("Content-Type:text/plain;charset=utf-8");
//数据放到一个数组内
while ($row=mysql_fetch_array($query,MYSQL_ASSOC)){
$arr[]=$row;
}
//将数组编码成json格式字符串
$jsonencode=json_encode($arr);
//向前端输出数据
echo $jsonencode;
//释放资源
mysql_free_result($query);
?>
前端HTML模板,使用HTML5的文档类型:
使用数据表的ID,Project(类型char()),Acceptance(类型date),SumOf(类型int)四个字段
<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript"src="./excJS/jquery-1.6.4.js"></script>
<script type="text/javascript" src="Brown02.js"async="async"></script>
<link href="BlueDanube03.css"rel="stylesheet" type="text/css" />
<title>Ajax test 01</title>
</head>
<body>
<div>
<table id="project201109">
<tr id="title">
<td id="Idfy" align="center">ID</td>
<td id="Project" align="center">项目</td>
<td id="Acceptance" align="center">验收日期</td>
<td id="SumOf" align="center">监控点总数</td>
</tr>
<tr id="tr00">
<td class="Idfy"></td>
<td class="Project"></td>
<td class="Acceptance"></td>
<td class="SumOf"></td>
</tr>
<tr id="tr01">
<td class="Idfy"></td>
<td class="Project"></td>
<td class="Acceptance"></td>
<td class="SumOf"></td>
</tr>
<tr id="tr02">
<td class="Idfy"></td>
<td class="Project"></td>
<td class="Acceptance"></td>
<td class="SumOf"></td>
</tr>
<tr id="tr03">
<td class="Idfy"></td>
<td class="Project"></td>
<td class="Acceptance"></td>
<td class="SumOf"></td>
</tr>
<tr id="tr04">
<td class="Idfy"></td>
<td class="Project"></td>
<tdclass="Acceptance"></td>
<td class="SumOf"></td>
</tr>
</table>
</div>
<div>
<button id="prevpage">前一页</button>
<button id="nextpage">下一页</button>
</div>
</body>
</html>
Javascript文档:
// JavaScript Document
$(document).ready(function(){
//从ID为100开始取数据
varidentify=100;
//按照一页5行数据分页
varstep=5;
//jquery的Ajax语句,向PHP发送ID值,并设置成功返回处理函数
$.post("hello.php",{id:identify},function(data,textStatus,jqXHR){
//jquery的语法,遍历json数据对象,更改相应的tr元素
vari=0;
for(i=0;i<data.length;i++){
$("tr#tr0"+i+".Idfy").html(data[i].ID);
$("tr#tr0"+i+".Project").html(data[i].Project);
$("tr#tr0"+i+".Acceptance").html(data[i].Acceptance);
$("tr#tr0"+i+".SumOf").html(data[i].SumOf);
}
}
,"json");
//前一页按钮click事件
$("button#prevpage").click(function(){
identify=identify-step;
$.post("hello.php",{id:identify},function(data,textStatus,jqXHR){
vari=0;
for(i=0;i<data.length;i++){
$("tr#tr0"+i+".Idfy").html(data[i].ID);
$("tr#tr0"+i+".Project").html(data[i].Project);
$("tr#tr0"+i+".Acceptance").html(data[i].Acceptance);
$("tr#tr0"+i+".SumOf").html(data[i].SumOf);
}
}
,"json");
});
//下一页按钮click事件
$("button#nextpage").click(function(){
identify=identify+step;
$.post("hello.php",{id:identify},function(data,textStatus,jqXHR){
vari=0;
for(i=0;i<data.length;i++){
$("tr#tr0"+i+".Idfy").html(data[i].ID);
$("tr#tr0"+i+".Project").html(data[i].Project);
$("tr#tr0"+i+".Acceptance").html(data[i].Acceptance);
$("tr#tr0"+i+".SumOf").html(data[i].SumOf);
}
}
,"json");
});
});
CSS格式:
@charset "utf-8";
div {
width:1024px;
}
td.Idfy{
width:30px;
}
td.Project{
width:640px;
}
tr:nth-child(even) {
background:#CCC;
}
tr:nth-child(odd) {
background:#FFF;
}
tr:first-child{
text-align:center;
background:#F00;
}
就这么简单,其中包含Mysql数据库创建表,中文编码问题,PHP访问Mysql,POST参数的获取,JSON数据及传递前后编码解码,CSS格式控制,奇偶行格式控制,HTML5文档格式,Javascript/CSS/HTML结合,Ajax的POST方式和HTML元素的jQuery事件等等。
IE6效果,部分CSS属性不支持:
IE8效果,部分CSS属性不支持:
IE9效果:
Chrome效果:
使用到的jQuery 1.6.4 可以到这里下http://www.jquery.org
火狐浏览器效果图(注意:部分文字不想公开,故意造成乱码)
因为使用的是Mysql,语法与MSSQL 有所不同,创建例子数据库和例子数据表:
CREATE TABLE Project201109 (
IDint NOT NULL AUTO_INCREMENT PRIMARY KEY,
Projectvarchar(255) NULL,
ProjectCodevarchar(255) NULL,
Customervarchar(255) NULL,
HasContractvarchar(255) NULL,
Zonevarchar(255) NULL,
IsMaintainvarchar(255) NULL,
Acceptancedatetime NULL,
EquipmentContractsOverdatetime NULL,
EquipmentContractsNotevarchar(255) NULL,
MaintainContractsOverdatetime NULL,
MaintainContractsNotevarchar(255) NULL,
NumOfSettlementint NULL,
Teamvarchar(255) NULL,
MaintainLeveint NULL,
ServiceLevechar(10) NULL,
MaintenanceLevelchar(10) NULL,
Contractvarchar(255) NULL,
CleanNotevarchar(255) NULL,
InspectionCyclevarchar(255) NULL,
ResponseTimevarchar(255) NULL,
ArrivalTimevarchar(255) NULL,
ProvideTimevarchar(255) NULL,
ReportCyclevarchar(255) NULL,
ContractsNotevarchar(255) NULL,
ProjectTypevarchar(255) NULL,
CleaningInspectionCyclevarchar(50) NULL,
NextServiceTimedatetime NULL,
CleaningInspectionNotevarchar(50) NULL,
IsCleamAmountint NULL,
SumOfint NULL,
ScopeOfmaintenancevarchar(255) NULL,
ContractCodeint NULL,
ContractMarkint NULL
) CHARACTER SET utf8
数据录入就省略,数据存储,传递,页面显示全程使用utf8编码。
使用PHP访问mysql数据库非常容易,简单几句就可以实现。
<?php
//读取页面请求的参数id,这个由js的Ajax发送过来的,在后面会说到。
$id=$_POST['id'];
//连接192.168.1.102服务器,输入用户名和密码
$conn = mysql_connect("192.168.1.102","<login user>","<password>") ordie
("Unseccessful");
//如果你发现显示乱码,这句很重要。
mysql_query("SET NAMES 'utf8'");
//连接test数据库
mysql_select_db("test",$conn);
//刚才POST过来一个id值,在这里使用到了,从数据库取出大于等于id的前五条数据
$sql="select * from Project201109 where id>=".$id." limit5";
//获取数据集
$query=mysql_query($sql,$conn) or die("Query to get blah failed with error: ".mysql_error());
/* 数据返回HTML头,指定utf-8编码和内容类型,以json格式,注意Content-Type值,否则接收json数据时编码出错 */
header("Content-Type:text/plain;charset=utf-8");
//数据放到一个数组内
while ($row=mysql_fetch_array($query,MYSQL_ASSOC)){
$arr[]=$row;
}
//将数组编码成json格式字符串
$jsonencode=json_encode($arr);
//向前端输出数据
echo $jsonencode;
//释放资源
mysql_free_result($query);
?>
前端HTML模板,使用HTML5的文档类型:
使用数据表的ID,Project(类型char()),Acceptance(类型date),SumOf(类型int)四个字段
<!DOCTYPE HTML>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript"src="./excJS/jquery-1.6.4.js"></script>
<script type="text/javascript" src="Brown02.js"async="async"></script>
<link href="BlueDanube03.css"rel="stylesheet" type="text/css" />
<title>Ajax test 01</title>
</head>
<body>
<div>
<table id="project201109">
<tr id="title">
<td id="Idfy" align="center">ID</td>
<td id="Project" align="center">项目</td>
<td id="Acceptance" align="center">验收日期</td>
<td id="SumOf" align="center">监控点总数</td>
</tr>
<tr id="tr00">
<td class="Idfy"></td>
<td class="Project"></td>
<td class="Acceptance"></td>
<td class="SumOf"></td>
</tr>
<tr id="tr01">
<td class="Idfy"></td>
<td class="Project"></td>
<td class="Acceptance"></td>
<td class="SumOf"></td>
</tr>
<tr id="tr02">
<td class="Idfy"></td>
<td class="Project"></td>
<td class="Acceptance"></td>
<td class="SumOf"></td>
</tr>
<tr id="tr03">
<td class="Idfy"></td>
<td class="Project"></td>
<td class="Acceptance"></td>
<td class="SumOf"></td>
</tr>
<tr id="tr04">
<td class="Idfy"></td>
<td class="Project"></td>
<tdclass="Acceptance"></td>
<td class="SumOf"></td>
</tr>
</table>
</div>
<div>
<button id="prevpage">前一页</button>
<button id="nextpage">下一页</button>
</div>
</body>
</html>
Javascript文档:
// JavaScript Document
$(document).ready(function(){
//从ID为100开始取数据
varidentify=100;
//按照一页5行数据分页
varstep=5;
//jquery的Ajax语句,向PHP发送ID值,并设置成功返回处理函数
$.post("hello.php",{id:identify},function(data,textStatus,jqXHR){
//jquery的语法,遍历json数据对象,更改相应的tr元素
vari=0;
for(i=0;i<data.length;i++){
$("tr#tr0"+i+".Idfy").html(data[i].ID);
$("tr#tr0"+i+".Project").html(data[i].Project);
$("tr#tr0"+i+".Acceptance").html(data[i].Acceptance);
$("tr#tr0"+i+".SumOf").html(data[i].SumOf);
}
}
,"json");
//前一页按钮click事件
$("button#prevpage").click(function(){
identify=identify-step;
$.post("hello.php",{id:identify},function(data,textStatus,jqXHR){
vari=0;
for(i=0;i<data.length;i++){
$("tr#tr0"+i+".Idfy").html(data[i].ID);
$("tr#tr0"+i+".Project").html(data[i].Project);
$("tr#tr0"+i+".Acceptance").html(data[i].Acceptance);
$("tr#tr0"+i+".SumOf").html(data[i].SumOf);
}
}
,"json");
});
//下一页按钮click事件
$("button#nextpage").click(function(){
identify=identify+step;
$.post("hello.php",{id:identify},function(data,textStatus,jqXHR){
vari=0;
for(i=0;i<data.length;i++){
$("tr#tr0"+i+".Idfy").html(data[i].ID);
$("tr#tr0"+i+".Project").html(data[i].Project);
$("tr#tr0"+i+".Acceptance").html(data[i].Acceptance);
$("tr#tr0"+i+".SumOf").html(data[i].SumOf);
}
}
,"json");
});
});
CSS格式:
@charset "utf-8";
div {
width:1024px;
}
td.Idfy{
width:30px;
}
td.Project{
width:640px;
}
tr:nth-child(even) {
background:#CCC;
}
tr:nth-child(odd) {
background:#FFF;
}
tr:first-child{
text-align:center;
background:#F00;
}
就这么简单,其中包含Mysql数据库创建表,中文编码问题,PHP访问Mysql,POST参数的获取,JSON数据及传递前后编码解码,CSS格式控制,奇偶行格式控制,HTML5文档格式,Javascript/CSS/HTML结合,Ajax的POST方式和HTML元素的jQuery事件等等。
IE6效果,部分CSS属性不支持:
IE8效果,部分CSS属性不支持:
IE9效果:
Chrome效果:
相关文章推荐
- [转]结合PHP实例谈谈如何解决jQuery.ajax提交GB2312或GBK编码中文乱码问题
- php+jquery+ajax+json的一个最简单实例
- php最简单服务器搭建和jquery中的ajax记录备忘
- Jquery中的AJax技术结合PHP实现无刷新验证验证码
- 使用ajax,结合jquery,php实现图片上传预览功能
- php结合jquery异步上传图片(ajaxSubmit)
- 简单示例:AJAX结合PHP代码实现登录
- jQuery结合Ajax实现简单的前端验证和服务端查询
- php+jquery+ajax+json简单小例子
- 简单的百度预测搜索功能(php+jQuery+js+ajax)
- jquery与php结合实现AJAX长轮询(LongPoll)
- jQuery+Ajax+PHP 制作简单的异步数据传输(测试用户名是否可用)
- Jquery+ajax+php实现简单的异步提交
- 最简单jquery.ajax+php例子(对话框显示文本框输入内容),以小见大(初学手记)
- php结合jquery异步上传图片(ajaxSubmit)
- php+jquery+ajax+json简单小例子
- php+jQuery+Ajax简单实现页面异步刷新
- 【转】jQuery+Ajax+PHP登录实例 一个简单的用Jquery中ajax方法登录的例子
- jquery+ajax+php简单示例
- php+jquery+ajax+json简单小例子