jqueryで画像データを動的に読み込む練習 code

最近jqueryを勉強していて、このライブラリの威力を感じているのですが、良い本を見つけました<<Sharp jquery>>
何気なくやってみた、上記は写真一覧と2つのボタンです。小さな写真をクリックすると大きな写真が表示され、次のページと前のページの写真が表示されます。
アイデア:
1. まず、上部に小さな画像と 2 つのボタン、下部に大きな画像が配置されたシンプルなレイアウトの写真閲覧ページ viewer.htm を作成します。
2. 写真表示ページのリクエストを処理するための一般的な処理プログラム viewServer.ashx を作成します。
3. もちろん、画像のパス、説明、その他の情報を含むデータベースを使用する必要があります。それぞれの小さな画像のパスは大きな画像に対応する必要があり、小さな画像をクリックするとロードされます。ここでは小さな画像を作成しなかったので、すべて大きな画像をロードしました。
4. データ送信に json を使用して、ページが読み込まれるか、左右のボタンをクリックすると、画像が ajax を通じて読み込まれ、要求された画像の開始番号と終了番号が取得されます。
背景ページはリクエスト情報を受信後、データベースから必要な画像情報を検索します。
効果は次のとおりです:
jqueryで画像データを動的に読み込む練習 code_jquery
実装コード:
viewer.htm

コードをコピーコードは次のとおりです:

私の写真

共0张，当前第0张

viewserver.ashx:

复制代

代码如下:

 
<%@ WebHandler Language="C#" Class="viewServer" %> 
システムを使用しています。 
System.Web を使用; 
System.Data.SqlClient を使用; 
System.Data を使用します。 
System.Collections.Generic を使用; 
public class viewServer : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
文字列アクション = 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 = 新しいリスト<写真>(); 
for (int i = 0; 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(リスト)); 
} 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
//1 つの写真を封入し、その後 json を使用します 
public class Photo 
{ 
public Photo(int i, string name, string url, string alt,文字列ノート、int rownum) 
{ 
id = i; 
imageName = 名前; 
imageUrl = URL; 
imageAlt = alt; 
this.notes = メモ; 
this.rownum = rownum; 
} 
プライベート int ID; //图片编号 
public int Id 
{ 
get { return id; 
set { id = 値; } 
} 
private string imageName;//画像名 
public string ImageName 
{ 
get { return imageName; 
set {imageName = 値; 
} 
プライベート文字列 imageUrl; //图片路径 
public string ImageUrl 
{ 
get { return imageUrl; 
set {imageUrl = 値; 
} 
プライベート文字列 imageAlt; //画像説明 
public string ImageAlt 
{ 
get { return imageAlt; 
set {imageAlt = 値; } 
} 
プライベート文字列ノート; 
public string Notes 
{ 
get { return Notes; } 
set { メモ = 値; 
} 
private int rownum; 
public int Rownum 
{ 
get { return rownum; 
set {行番号 = 値; } 
} 
} 
} 

この中の sqlHelper は私独自のデータ库访问类、比较简单就不得了。 ajax に関する問題の 1 つとして、
我の js代コードには 2 つの要求関数があります。1 つは画像取得の取得関数getCountPhoto()、もう 1 つは画像のアップロードのパブリック関数loadPhoto(startId,endId)、私はこの 2 つの関数を使用して、それぞれ、

复制コードを表示します。代次如下:

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

 

この蠷流
これは、一方の実行が完了して実行されるのではなく、両方の ajax リクエストが交差して実行されるものです。