連載
» 2010年06月25日 00時00分 公開

連載:jQuery逆引きリファレンス:第8回 Ajax編(前編) (4/11)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 loadメソッドでは、引数dataを指定することでサーバサイド・スクリプトに対して、データを送信することができます*

 具体的なサンプルも見てみましょう。以下では、[現在時刻]ボタンをクリックしたタイミングでサーバサイド(.aspxファイル)から現在時刻を取得し、ページに反映します。この際、クライアントサイド・スクリプトから時刻表示のための書式文字列をデータとして送信します。

* loadメソッドはデフォルトでHTTP GETによる通信を行いますが、引数dataが指定された場合にはHTTP POSTで通信します。


<%@ Page Language="VB" %>
<%=DateTime.Now.ToString(Request.Form("format"))%>

リスト109 指定されたポスト・データformatを基に現在時刻を整形(CurrentFormat.aspx)

<script type="text/javascript">

$(function() {

  // ボタン・クリック時の挙動を定義
  $('#btn').click(function() {

    // CurrentFormat.aspxの処理結果をページに反映
    $('#result').load('./CurrentFormat.aspx',

      // 送信するデータ
      { format : 'yyyy年MM月dd日 HH時mm分ss秒'} );
  });
});
</script>

  ……中略……

<form>
  <input type="button" id="btn" value="現在時刻" />
  <div id="result"></div>
</form>

リスト110 サーバサイド・スクリプトにポスト・データを送信(LoadPost.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト110の実行結果

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。