ajaxなボタンでDOMな仕組みをjQueryした

  • このエントリーをはてなブックマークに追加

terminalアイキャッチ画像

こんにちは
かねしろ@pinkrootです。

今日はボタンをクリックするとリロード(再読み込み)無しで画面内の数値を書き換える処理を書きました。
ajaxな動きです。
DOMとか言うらしいですが、よく分からないです。
唯一分かるのはjQueryを使っていることくらい。
なので、このようなエントリタイトルになってます(笑)

ぐぐってみるとDOMとはこんな感じらしいです。
wikipedia – Document Object Model
読んだけど曖昧な理解。。。
ここ読みこめば理解できるそうなので、後ほど取り組みます。

とりあえず使い方だけ備忘録。

HowTo

自分で作成するファイルは以下の2つ。

  • ユーザが閲覧してボタンを押す画面(index.html)
  • ボタンが押されたら呼び出されるjavascriptファイル(myFunc.js)

上記ファイルの他に、ajaxを使うためにjQueryのファイルが必要となります。
ここから1.7.2のMinifiedをダウンロードして使いました。
ダウンロードしてきたjquery-1.7.2.min.jsと自作のpost.jsはjsディレクトリを作成し、その中にまとめて置きました。

.ProjectDirectory
  index.html
  .js
    jquery-1.7.2.min.js
    myFunc.js
というようなディレクトリ構成。

index.html

index.htmlのコードは以下の通り。

ボタンがクリックされると、ajaxな仕組みのための関数(addFunc)が呼び出されます。
今回は引数としてボタンのナンバーを渡してあります。
この引数の意味や使い方についてはmyFunc.jsの説明時にしっかりと行いますね。

なお、このajaxな仕組みについてはPHPとjQueryの組み合わせでajaxなPOSTをMySQLに格納してみたの方で詳しく説明してあります。
上記の記事を読むことで、以下のjsの動作についても理解が深まるはずです。

myFunc.js

myFunc.jsのコードは以下の通り。

まず、ajaxな動作なのでaddFuncの$.post()が動き出します。
第一引数の部分は値をPOSTする先のファイルなのですが、今回は特に値を何かに格納する必要はないので、空にしてみました。第二引数は渡す値なのですが、こっちも空で。
# 何かに渡すケースについては、こちらの記事を読むと参考になるはずです。

さて、$.postが動き出すと、その中にあるfunction(json)が働き始めます。
この中では、まず変更する値を特定するため、elmという変数を定義します。
受け取ったidを#buttonという文字列にくっつけるため、#button1か#button2かが判定できます。
そのあとにあるのが、numというクラスです。
これはHTMLを見てもらえば分かりやすいと思いますが、idがbutton1(もしくはbutton2)のtrに対して、子要素であるtdの中にあるnumクラスを指定している、という形になっています。
ここまでで、書き換えを行う値の場所を特定したことになります。

次の行

では、先ほど指定した箇所(elmに格納したnumの場所)に、「現状で書かれている文字列(数字)」を取得するという処理が行われます。
初期状態では0が入っているので0がcountに代入されますし、加算後であればその数値が格納されることとなります。

elm.fadeOutでは、elmで指定した箇所をフェードアウト(徐々に消える)して、その中のfunctionを呼び出します。
中のfunctionでは、countを+1したものをelmの場所に表示し、それをフェードイン(徐々に現れる)で表示して、処理終了です。
先程はelm.text()で現状の文字列を取得しましたが、textのカッコの中に表示したい文字列を突っ込むと、それがサイト上で閲覧できる状態になるわけです。

なお、各ソースはgithubにアップしてあります。
git@github.com:pinkroot/ajax-dom-sample.git

挙動

ページにアクセスすると以下の様なボタンと、数値が見えます。

DOM初期状態

このボタンのうち、どちらかをクリックすると、ページのリロード無しでボタン横の数値が加算されて再表示されます。
このとき、一度フェードアウトで数値が消え、その後にフェードインで加算された数値が表示されるような挙動となります。

ボタンを1度押した状態

ボタンを押すたび数値が増えるよ!

ボタンを複数回押した状態

この仕組みさえ使えておけば、いろいろな状態で役立てそうですね(`・ω・)

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメント

  1. シャネルスーパーコピー より:

    迅速に対応していただき、また包装もキレイでとても良かったです。
    また、何かの機会がありましたら、利用させていただきます。
    【送料無料】グッチ パスケースをセール価格で販売中♪グッチ パスケース グッチスウィング トレインパスケース 354500 ライトブルー レザー 新品 未使用 カードケース トレードマーク グッチ
    通勤用
    同じ商品の定期入れを落としてしまいました。定期券・いろんなカードが入っていて、気に入って使用していたのですが、落とし物でどこにも届いておらず、残念です(><@)
    また、色違いで購入しました。
    色は迷いましたが、キレイなブルーに決めました。
    これで一気進展、愛用し頑張りたいと思います。
    シャネルスーパーコピー https://www.tentenok.com/product-3017.html

  2. スーパーコピーN級品 より:

    きずひとつなく綺麗な品です ありがとーございました
    ルイヴィトン カデナ パドロック R10007 シルバー 艶なし マット 新品 未使用 南京錠 lv-003 ルイ・ヴィトン ルイ ヴィトン ルイビトン ビトン 鍵 キー ペンダント ネックレス キーホルダー ブランド ギフト プレゼント ペンダントトップ
    スーパーコピーN級品 https://www.kopiok.com/protype/list-306-1.html

  3. プラダ ボストンバッグ スーパーコピー 2ちゃんねる より:

    本日無事商品受け取りました。
    思っていたよりも全然綺麗でびっくりしました。
    また機会がありましたら利用させていただきたいです。
    プラダ ボストンバッグ スーパーコピー 2ちゃんねる https://www.ginzajp.com/productall-3805.html

  4. スーパーコピー 代引き 財布 q-pot より:

    ディオール時計偽物
    弊社主要取扱商品 :ブランドバッグコピー品、ブランド財布コピー品。
    ルイヴィトン コピー品、シ,ャネル コピー品、グッチ コピー品,
    エルメスコピー品、バレンシアガコピー品があります。
    おしゃれな大人の女性にすごく人気があります。
    これを持っているだけで人目を引くこと間違いなし!!
    美しいフォルムは気品と風格が世界のセレブを魅了して止みません。
    是非この機会にご入札ください.
    スーパーコピー 代引き 財布 q-pot https://www.bagraku.com/bagraku48/index_2.html

  5. グッチ スーパーコピー アクセサリー より:

    ロレックスコピー – ロレックスコピー-ブランドコピーのは激安優良店!
    ロレックスコピー、シャネルコピー、エルメス コピー、ルイヴィトンコピー、グッチコピー、 IWCコピー 時計、ブランド時計コピー,ブランドバッグコピー, ブランド財布コピー等N級品販売通販。
    ブランドコピー価格及び時計バッグ財布情報を提供致します販売専門ショップ。
    「 安 全・安 心・信 頼 」
    グッチ スーパーコピー アクセサリー https://www.gmt78.com/product/detail/10968.htm

  6. ヨドバシ ロレックス 通販 より:

    早くに対応していただいてありがとうございます。
    きれいなバッグでうれしいです。
    【送料無料】オロップ 2WAYバッグをセール価格で販売中♪オロップ 2WAYバッグ ブラック クロコダイル 中古 ガマ口 クラッチバッグ ショルダーストラップ OLOP
    とてもきれいなバッグでした。金具がじゃましてスマホがケースなしで押し込めないと入らないことだけが残念です。きれいなのでこれから使っていきたいと思います。
    ヨドバシ ロレックス 通販 https://www.007kopi.com/product/1894.html

  7. vog.agvol.comブランドコピー より:

    LOUIS VUITTONバッグコピー 品 ブランド,LOUIS VUITTONブランド 通販 激安,バッグブランド 激安vog.agvol.com/goods-125515.html バッグLOUIS VUITTONあえて透かすスタイル即発送最新作2023 ブランド 通販 激安 LOUIS VUITTONコピー 通販vog.agvol.com/brand-52-c0.htmlルイ ヴィトンブランド コピー 通販 LOUIS VUITTONブランド 偽物 激安 通販2023年SSのトレンド新しい斬新なスタイルバッグ

コメントを残す

*