jquery가 이미지 데이터를 동적으로 로드하는 연습

요즘 jquery를 공부하다가 이 라이브러리의 위력을 느끼다가 좋은 책을 발견했습니다 <<Sharp jquery>> 는 사진 목록과 두 개의 버튼입니다. 버튼을 클릭하면 다음 페이지와 이전 페이지에서 사진을 볼 수 있습니다.
아이디어:
1. 먼저 간단한 레이아웃으로 상단에 작은 그림과 두 개의 버튼이 있고 하단에 큰 그림이 있는 사진 보기 페이지 뷰어.htm을 만듭니다.
2. 사진 보기 페이지에 대한 요청을 처리하기 위한 일반 처리 프로그램 viewServer.ashx를 만듭니다.
3. 그런 다음에는 이미지 경로, 설명, 기타 정보를 포함한 데이터베이스를 사용해야 합니다. 각각의 작은 그림 경로는 큰 그림과 일치해야 하며, 작은 그림을 클릭하면 로드됩니다. 여기서는 작은 그림을 만들지 않았기 때문에 모두 큰 그림으로 로드했습니다.
4. 데이터 전송을 위해 json을 사용하여 이미지 로딩 기능을 만듭니다. 페이지가 로드되거나 왼쪽 및 오른쪽 버튼을 클릭하면 ajax를 통해 이미지가 로드되고 요청된 이미지의 시작 번호와 끝 번호가 표시됩니다.
요청 정보를 받은 후, 배경 페이지는 데이터베이스에서 필요한 이미지 정보를 검색합니다.
효과는 다음과 같습니다:

구현 코드:
viewer.htm

코드 복사 코드는 다음과 같습니다.

<머리>

<테이블>

加载中.....
 

共0张， 当前第0张

viewserver.ashx:




复代码

代码如下:

<%@ WebHandler Language="C#" Class="viewServer" %>
시스템 사용;
System.Web 사용;
System.Data.SqlClient 사용;
System.Data 사용;
System.Collections.Generic 사용;
공용 클래스 viewServer : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
문자열 작업 = context.Request["action"].ToString();
if (action == "countPhoto") //统计共多少图文
{
string sql = "T_SmallPhotos에서 count(*) 선택";
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] 여기서 id>1 및 id<10";
SqlParameter[] param = new SqlParameter[] {new SqlParameter("@startId",startId),
new SqlParameter("@endId",endId)};
DataTable dt = sqlHelper.GetTable(sqlStr, param);
목록<사진> 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 .직렬화(목록));
}
}
public bool IsReusable
{
get
{
return false;
}
}
//封装一个 사진类，然后使用json传递
public class Photo
{
public Photo(int i, 문자열 이름, 문자열 url, 문자열 alt, 문자열 메모, int rownum)
{
id = i;
imageName = 이름;
imageUrl = url;
imageAlt = alt;
this.notes = 노트;
this.rownum = 행번호;
}
비공개 int ID; //图文编号
public int Id
{
get { return id; }
설정 { id = 값; }
}
비공개 문자열 imageName;//그림 이름
공개 문자열 ImageName
{
get { return imageName; }
set { imageName = 값; }
}
비공개 문자열 imageUrl; //图文路径
public string ImageUrl
{
get { return imageUrl; }
set { imageUrl = 값; }
}
비공개 문자열 imageAlt; //图文描述
public string ImageAlt
{
get { return imageAlt; }
설정 { imageAlt = 값; }
}
비공개 문자열 메모;
공개 문자열 메모
{
get { return Notes; }
설정 { 메모 = 값; }
}
private int rownum;
public int Rownum
{
get { return rownum; }
set { 행 번호 = 값; }
}
}
}

其中sqlHelper是我自繉的数据库访问类，比较简单就不贴来了。
재实现过程中遇到一个ajax방향 면의 问题,现에서 还是没搞太明白:
나의 js代码中은 모두 两个请求函数, 一个是获取图 Pictures 总数getCountPhoto(), 一个是加载图文字函数loadPhoto(startId,endId), 우리는 같은 앱을 사용하여 공유하고 있습니다.

제대码代码如下:

$(function(){
loadPhoto(1,9);
　　　　getCountPhoto();
}

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