はてなブックマーク

ホーム » AJAX » jQuery の ajax で JavaScript のオブジェクトをポストした時に送信されるデータは？ jQuery の ajax ライブラリを利用すると、AJAX を利用した動的なウェブページを簡単に作成できます。 AJAX を使うメソッドは $.ajax メソッドです。 これについては、AJAX で説明しました。 Ajax では様々なデータを背後で送受信可能です。 ここでは JavaScript のオブジェクトをサーバーにポストしたときに、実際にどのような形式でデータがポストされているのか確認します。 ajax によるデータのポスト HTTP には主なメソッドとして GET とか POST 等があります。POST というのは、データが HTTP リクエストのボディー部に設定されるタイプのものを指します。 GET リクエストの場合は、URL の後ろに ?a=1

jQuery を利用することで Ajax (エイジャックス) のコードもかなり簡易化することが可能です。 一般には Ajax を利用するに際して jQuery を利用する動機としてはブラウザの違いを吸収するということに加えて、ネットワークを介する呼び出しとなることから煩雑になりがちなエラー処理をスマートに行うということがあげられます。 ここでは具体例を通して使い方をみていきます。 jQuery 1.8 以降でそれ以前の Ajax メソッド (success, error, complete) は deprecated というステータスになりました。 こちらの新しい Ajax 利用方法を参考にしてください。 サーバーから HTML を取得して、 div 要素にセットする ここではボタンをクリックした時に、バックエンドでサーバーから HTML 文書を取得し、その HTML をそのまま div

ここでは jQuery UI のオートコンプリート機能を紹介します。 念のため説明しておきますと、オートコンプリート機能というのは、テキストボックスの入力補助機能のひとつです。 ユーザーがテキストボックスに文字をタイプする回数を減らすために、入力候補リストを表示し、ユーザーがリストから選択可能とするものです。 ユーザーからしてみれば、リストから選択しなければ通常のテキストボックスと同様に使え、さらに便利な場合にのみリストから選択できるといった使い方ができ、 マイナス面はほぼないため、Google の検索ボックスなどをはじめとして、広く利用されています。 ところが、実際にこれをスクラッチから実装しようとするとなかなか大変な作業になってしまいます。 jQuery UI ではオートコンプリートが簡単に実装できるようにウィジェットとして用意されています。 jQuery UI オートコンプリートウィ

ここではカスタムでメニューを作ってみましょう。 様々なプラグインなどはあるのですが、単純なドロップダウンくらいなら、ul、li で作ってしまうのも良いかもしれません。 jQuery の知識、というよりは単に CSS が９割です。 単純なドロップダウンメニューの作成 jQuery を利用、といっても大したことでは利用していません。 HTMLは次のようになってます。全体を dropdown_container という ID の Div 要素にしてます。 メニューの中身は dropdown というクラスの ul (順序なしリスト) です。li 項目がメニューになってます。その li は a タグと ul タグで構成されていて、 ul 部分がスライドダウンします。 <div id="dropdown_container"> <ul class="dropdown"> <li class='drop

ダイアログボックスでは、ユーザーにメッセージを表示する、入力を促す、などします。 簡単な一行程度の入力を促すのなら、 prompt でもいいでしょうが、複数のデータの入力を促すのに複数回の prompt をするのでは、 ユーザーに対してちょっと古くさいプログラムであるという印象を与えかねません。 jQuery によるダイアログの表示 次のボタンをクリックすると、ダイアログボックスを表示します。 OK ボタンをクリックした時に、そのクリックイベントを処理してダイアログを閉じています。 このダイアログボックスの作成手順を説明します。 まずはダイアログの中身を div として作成します。 <div id="dialogdemo1"> <p>Hello, jQuery UI Dialog!</p> </div> 次にこの要素を dialog メソッドでダイアログにしますが、このときにオプションをい

アコーディオンの基本的な使用例 上の例がどのように実装されるかみてみましょう。 <div id="acdemo" style='width:300px;'> <div> <h3><a href="#">上段</a></h3> <div>下の "中段" という文字をクリックしてみてください。</div> </div> <div> <h3><a href="#">中段</a></h3> <div>中段の内容が表示されました。 さらに "下段" という文字をクリックしてください。</div> </div> <div> <h3><a href="#">下段</a></h3> <div>jQuery UI のアコーディオンを利用しています。</div> </div> </div> コードはたった一行です。 div 要素に対して accordion() を呼び出しているだけです。 $(document

処理の進捗状況を示す場合には、プログレスバーを表示した方が親切である場合があります。 最近の傾向としては Web の場合はサーバー側で行う処理時間の長い処理の途中経過を示すのは、現在何パーセントという風に表示するのではなく、 "Please wait" 程度にとどめておきグルグルまわるアイコンを表示。ビジネスロジックとして、現在何パーセント（例えばソーシャルサイトやデートサイトのプロフィール入力状況など) という進捗を示したい場合に、プログレスバーを表示、という場合が多いように思います。 いずれにせよ、上手にプログレスバーも使いたいものです。 jQuery プログレスバーウィジェットの基本的な使用方法 プログレスバーを使うのは簡単です。多くの他のウィジェットと同様に、div 要素に対して progressbar() を呼び出せば OK です。 デフォルトで最小値 0、最大値 100 で、そ

日付を入力する時には、カレンダーをみながら入力したい場合が多いものですよね。 最近のアプリケーションでは日付の入力項目では、キーボードからの入力を許可すると同時にカレンダーが表示される場合も少なくありません。 jQuery UI のデートピッカーウィジェットを使うと、簡単にカレンダーを利用できます。 基本的な利用方法 次のテキストボックスを日付の入力項目とします。 このテキストボックスに日付を入力するために、テキストボックスにフォーカスがきたときに、カレンダーを表示しています。 カレンダーから日付を選択すると、カレンダーが閉じて選択した値がテキストボックスに入ります。 ちなみに、このカレンダーは Ctrl + 矢印キーなどでキーボードからも操作可能です。 このようなカレンダーの表示をどのようにしたら実現できるでしょうか。実はこの動作はデフォルトの操作そのままなので、ほんの一行でできてしまい

jQuery のコアの部分は、もちろん大変優れているのですが表に見えない分だけ地味といえば地味ですよね。しかし、 UI は一目でその効果がみえるので大変華やかなものです。 ここでは jQuery UI の利用方法について説明します。 jQuery の基礎 クリック可能なウィジェットの状態変化 角を丸くする方法 フレームワーク・アイコンの使い方と種類 ウィジェット アコーディオン オートコンプリート タブ ダイアログ ダイアログの場所指定 スライダー 日付の入力を支援 - デートピッカー 進捗を表示 - プログレスバー

クリック可能なボタンなどの要素では、ポインターが上に乗ったときに色などの表示を変更することで、 ユーザーにクリック可能であることがよりわかりやすくなります。 特に色を変えてしまって、ボタンであること自体が分かりにくくなってしまうこともあるので、この点は大事なポイントです。 jQuery ではボタンに限らず、状態 (state) がいくつか定義されています。その状態を css クラスに指定することによって、どんな意味の状態であるか指定できます。 ボタンの状態 ここではボタンの状態とその切り替え方をみておきましょう。 尚、class の指定によって変化する、ということはみて分かるはずですが、何色に変わるかという具体的な点については、あなたが使っているテーマに依存しているので、 まったく同じようには表示されないのでその点は注意してください。 状態ボタンの表示

jQuery UI にはフレームワークアイコンとして、 そのテーマにあったアイコンが多数付属します。 jQuery UI のアイコンの使い方とその種類を紹介します。

Flexigrid は Paulo P. Marinas 氏によって開発されているグリッドライブラリです。 MIT ライセンスで配布されています。 Flexigrid を利用するとデータのソート、フィルター、カラム・テーブルのリサイズ、ページネーションなどを簡単にできるようになります。 ここでは Flexigrid の基本的な使い方と、少し発展的な利用方法について説明します。 少し発展的な話題はこちら: FlexiGrid - AJAX でデータ取得 FlexiGrid - 行のカスタマイズ 基本的な使い方 Flexigrid の入手方法と設定方法 Flexigrid は Flexigrid のサイトから無償でダウンロード可能です (MIT ライセンス)。 flexigrid-<バージョン>.zip をダウンロードしてきて展開すると js と css というフォルダーがあります。 この中の

<div style='clear:both;' id="tabdemo1"> <ul> <li><a href="#tab-google1">Google</a></li> <li><a href="#tab-apple1">Apple</a></li> <li><a href="#tab-ms1">Microsoft</a></li> </ul> <div id="tab-google1"> <p>Android, Chromebooks</p> </div> <div id="tab-apple1"> <p>iPhone, iPad</p> </div> <div id="tab-ms1"> <p>Windows Phone</p> </div> </div>

jQuery で高品質なウェブサイトを制作 このサイトでは jQuery を使って高品質なウェブサイトを作る方法についてまとめています。 ちなみに、先に言っておきますが、このサイトは jQuery の完全なリファレンスではありません。 私が実際に業務でウェブサイトを構築するに当たって、よく使うもの、便利だと思うものを中心に掲載しています。 jQuery の利点はまた他のページで説明しますが、大きく分けて３つ挙げられます。 ひとつは jQuery がブラウザによる違いを吸収することによって、あなたの開発を容易にすること。 二つ目は極めて便利なファンクションが利用可能となること。そして三つめは優れた UI をもつライブラリが直ちに利用できることです。