您的位置:首页 > Web前端 > JQuery

简单的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效果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: