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

最近jqueryを勉強していて、このライブラリの威力を感じているのですが、良い本を見つけました<<Sharp jquery>>
何気なくやってみた、上記は写真一覧と2つのボタンです。 小さな写真をクリックすると大きな写真が表示され、次のページと前のページの写真が表示されます。
アイデア:
1. まず、上部に小さな画像と 2 つのボタン、下部に大きな画像が配置されたシンプルなレイアウトの写真閲覧ページ viewer.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 を使用;
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 リクエストが交差して実行されるものです。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JS_javascript スキルに基づいた unfineed と null の違いの分析次の記事：JS_javascript スキルに基づいた unfineed と null の違いの分析

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル