这几天研究jquery,感受到了该库的强大,而且找到本不错的书 <<锋利的jquery>>
这里我只是随便做了下,上面是照片列表和两个按钮,单击小图片下面显示大图片,当点击按钮时可以查看下一页,上一页的图片。
思路:
  1、首先建一个照片查看页面viewer.htm,简单布局,上面是小图片和两个按钮,下面是大图片。
  2、建一个一般处理程序viewServer.ashx,用来处理照片查看页面的请求。
  3、然后当然要用到数据库啦,包括图片的路径,描述等信息。每张小图片路径应该对应一张大图片,单击小图片时候再加载,这里我没做小图片所以都用大图片加载了。
  4、数据传输使用json,建立一个加载图片的函数,当页面加载或者单击left、right按钮的时候,通过ajax加载图片,将请求图片的开始编号、结束编号传递到后台页面,
    后台页面收到请求信息后,在数据库中查找所需图片信息。
效果如图:
【WEB前端开发】jquery动态加载图片数据练习代码_jquery
实现代码:
viewer.htm
复制代码 代码如下:



我的照片

















加载中.....





0张, 当前第 0





viewserver.ashx:
复制代码 代码如下:
<%@ WebHandler Language="C#" Class="viewServer" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.Collections.Generic;
public class viewServer : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string action = context.Request["action"].ToString();
if (action == "countPhoto") //统计共有多少图片
{
string sql = "select count(*) from T_SmallPhotos";
DataTable dt = sqlHelper.GetTable(sql);
int count = Convert.ToInt32(dt.Rows[0][0]);
context.Response.Write(count.ToString());
}
else if (action == "getData") //请求图片数据
{
string startId = context.Request["startId"].ToString();
string endId = context.Request["endId"].ToString();
//string sqlStr = string sqlStr = "SELECT * FROM (SELECT id, [imageName], [imageUrl], [imageAlt], [notes], Row_Number() OVER (ORDER BY id) rownum FROM T_SmallPhotos) t WHERE t .rownum >= 1 AND t .rownum <=5"
//这个查询语句有点小复杂,使用了开窗函数
string sqlStr = "SELECT * FROM (SELECT id, [imageName], [imageUrl], [imageAlt], [notes], Row_Number() OVER (ORDER BY id) rownum FROM T_SmallPhotos) t WHERE t .rownum >= @startId AND t .rownum <= @endId";
//string sqlStr = "SELECT [id], [imageName], [imageUrl], [imageAlt], [notes] FROM [T_SmallPhotos] where id>1 and id<10";
SqlParameter[] param = new SqlParameter[] {new SqlParameter("@startId",startId),
new SqlParameter("@endId",endId)};
DataTable dt = sqlHelper.GetTable(sqlStr, param);
List list = new List ();
for (int i = 0; i < dt.Rows.Count; i++)
{
list.Add(new Photo(Convert.ToInt32(dt.Rows[i][0]), dt.Rows[i][1].ToString(), dt.Rows[i][2].ToString(), dt.Rows[i][3].ToString(), dt.Rows[i][4].ToString(), Convert.ToInt32(dt.Rows[i][5])));
}
System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer();//将数据序列化为json数据
context.Response.Write(jss.Serialize(list));
}
}
public bool IsReusable
{
get
{
return false;
}
}
//封装一个照片类,然后使用json传递
public class Photo
{
public Photo(int i, string name, string url, string alt, string notes, int rownum)
{
id = i;
imageName = name;
imageUrl = url;
imageAlt = alt;
this.notes = notes;
this.rownum = rownum;
}
private int id; //图片编号
public int Id
{
get { return id; }
set { id = value; }
}
private string imageName;//图片名称
public string ImageName
{
get { return imageName; }
set { imageName = value; }
}
private string imageUrl; //图片路径
public string ImageUrl
{
get { return imageUrl; }
set { imageUrl = value; }
}
private string imageAlt; //图片描述
public string ImageAlt
{
get { return imageAlt; }
set { imageAlt = value; }
}
private string notes;
public string Notes
{
get { return notes; }
set { notes = value; }
}
private int rownum;
public int Rownum
{
get { return rownum; }
set { rownum = value; }
}
}
}

其中sqlHelper是我自定义的数据库访问类,比较简单就不贴出来了。
在实现过程中遇到一个ajax方面的问题,现在还是没搞太明白:
我的js代码中有两个请求函数,一个是获取图片总数getCountPhoto(),一个是加载图片的公共函数loadPhoto(startId,endId),我想在页面加载的时候同时调用这两个函数,分别显示出页码信息和具体图片列表,
复制代码 代码如下:
$(function(){
loadPhoto(1,9);
    getCountPhoto();
}

这样的话发现页面内容总是错误,经过调试发现原来两个ajax请求是交叉执行,并不是一个执行完成执行另一个的。
这就是前几天做的了。