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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

3週間前 By DDD

R.E.P.O.で節約説明した（そしてファイルを保存）

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法

4週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7565

15

CakePHP チュートリアル

1386

52

Steamのアカウント名の形式は何ですか

87

11

Win11 Activation Key Permanent

61

19

NYTの接続はヒントと回答です

28

102

もっと見る