09月
12
基于jQuery的面向dom的ajax编程
文章分类：jQuery 查看次数：733 + 125
不知道这么说合不合理，或者也可以叫做是模块化编程。
好处：
适用范围：数据量不是很大的页面，同时要有很好的用户体验。
下面用一个实例来说明这个编程思想
假设我们需要在客户端显示一些数据，这些数据以表格为容器。
所以html页就可以设计为
<html>
<head>
<link type="text/css" href="table.css" rel="stylesheet"/>
</head>
<body>
<div id="personal_info">
<div id="info_loading">loading...</div>
<table class="info" style="display:none">
<thead>
<tr>
<th>姓名</th>
<th>出生年月</th>
<th>性别</th>
<th>职业</th>
<th>薪水</th>
<th>简介</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<script src="jquery.pack.js"></script>
<script src="dom_control.js"></script>
</body>
</html>
可以看到，里面只有框架，没有任何数据
这里，我把两个js文件放在了最下面，这是为了避免在载入这两个js文件时，页面空白
下面就该编辑那个dom_control.js了。我先把源码放上来：
$(function(){
//这两步可以省去
//隐藏表格
$(".info").hide();
//显示loading
$("#info_loading").html("loading...");
});
//当id为personal_info的dom载入完成时执行下面的函数
$("#personal_info").ready(function(){
//$tbody指代的是#personal_info->table->tbody
$tbody = $("#personal_info table tbody");
//执行ajax
$.ajax({
//type指示是get还是post
type:"get",
//目标文件
url:"data.php",
//返回的数据类型
dataType:"json",
//载入发生错误时，显示错误信息
error:function(obj,errno){
$("#info_loading").html(errno);
},
//载入成功时，执行下面的函数
success:function(data){
$(".info").show();
$("#info_loading").hide();
//data是从服务端返回的数据
data = data.personal_info;
//遍历data数据
$.each(data,function(i,n){
//克隆$tbody的第一个tr
$tr = $tbody.children("tr:first").clone();
//eq(0)对应第一个单元格，以此类推
$("td:eq(0)",$tr).text(n["name"]);
$("td:eq(1)",$tr).text(n["birth"]);
$("td:eq(2)",$tr).text(n["sex"]);
$("td:eq(3)",$tr).text(n["job"]);
$("td:eq(4)",$tr).text(n["salary"]);
$("td:eq(5)",$tr).text(n["intro"]);
//附加到$tbody上
$tr.appendTo($tbody);
});
//移去第一个tr，因为它什么数据都没有
$tbody.children("tr:first").remove();
//分别对tr的奇数行和偶数行添加class
$("tr:odd",$tbody).addClass("odd");
$("tr:even",$tbody).addClass("even");
//对$tbody下面的tr元素附加hover函数，分别定义当鼠标滑过和移走时的函数
$("tr",$tbody).hover(function(){
//当鼠标滑过时，添加hover class
$(this).addClass("hover");
},function(){
//当鼠标移走时，移去hover class
$(this).removeClass("hover");
});
}
});
});
注释都很详细，应该能看得懂，基本的思想就是，当id为personal_info的div载入完成后，通过ajax，来取得data.php传递过来的数据，然后将数据放到对应的单元格里，最后设置一下表格的一些事件。
data.php源文件：
$data["personal_info"] = array();
$data["personal_info"][0] = array("name"=>"LZYY","birth"=>"1984-12-18","sex"=>"男","job"=>"暂无","salary"=>"0","intro"=>"长使英雄泪满襟");
$data["personal_info"][1] = array("name"=>"张三","birth"=>"1985-12-18","sex"=>"女","job"=>"秘书","salary"=>"3000","intro"=>"社会主义好");
$data["personal_info"][2] = array("name"=>"李四","birth"=>"1986-12-18","sex"=>"男","job"=>"司机","salary"=>"2500","intro"=>"我是开车的");
$data["personal_info"][3] = array("name"=>"王五","birth"=>"1987-12-18","sex"=>"女","job"=>"销售","salary"=>"4000","intro"=>"大家好");
$data["personal_info"][4] = array("name"=>"赵六","birth"=>"1988-12-18","sex"=>"男","job"=>"网页设计","salary"=>"2000","intro"=>"好没前途啊");
$json = new Services_JSON();
$output = $json->encode($data);
header("Content-type:text/plain;charset=utf-8");
echo $output;
其中用到了json-utf8.php，如果php版本是5.2的话，就可以不用载入这个文件而直接使用json_encode($data);
如果还有其他数据，比如article_title，那么就可以建立一个数组：$data["article_title"]，在客户端，可以通过article_title=data.article_title来取得。
演示：
http://www.live-my-life-with-yuyi.com/lab/dom_jquery/my_test.html
相关文章
评论
发表评论
-
-
订阅我的博客