検索
連載

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

jQueryを使えばAjax技術による非同期処理も簡潔に記述できる。Ajax関連の基本メソッドをまとめた、すぐに役立つ10本を一挙公開。

Share
Tweet
LINE
Hatena



「連載: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.

ページトップに戻る