[[Javascript]]~
[[PHP]]~
[[BGM ShareHouseに用いた技術まとめ - Javascript,PHP]]

* jQueryを使ってJSからPHPへ非同期通信をしてみる - Javascript,PHP [#vabcc712]

#contents

** 概要 [#s5499622]
- Javascript上のイベントによりPHPを呼び出し,サーバへのリクエストを非同期に行いたい~
 (例) サーバ上のファイルに文字列を追加したい,文字列を取得したい
- jQueryのajax通信機能を使えば楽ちん

** 導入 [#k2edc5b5]
方法は大きく分けて3つある.
+ jQuery.postによってPOSTメソッドで通信する方法
+ jQuery.getによってGETメソッドで通信する方法
+ jQuery.ajaxによって上記の通信方式に細かいオプションを指定する方法

1.と2.は簡単に使うことができるが,拡張性に乏しい.キャッシュを読みに行かないようにしたい場合(後述)や,コールバック時の処理を細かく設定したい場合は,3.を使うことになる.~

参考:~
[[jQuery.get( url, data, callback ) - jQuery 日本語リファレンス:http://semooh.jp/jquery/api/ajax/jQuery.get/+url%2C+data%2C+callback+/]]~
[[jQuery.post( url, data, callback, type ) - jQuery 日本語リファレンス:http://semooh.jp/jquery/api/ajax/jQuery.post/+url%2C+data%2C+callback%2C+type+/]]~
[[jQuery.ajax(options) - jQuery 日本語リファレンス:http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/]]~

今回はPOSTメソッドによる通信をjQueryで行う.

** 手順 [#pa8c0642]
+ jQueryをhtmlに読み込ませる
#code(html,nomenu,nonumber){{
#highlightjs(html){{
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
}}
+ Javascriptをこんな感じに書く(実際はイベントが発火したタイミングで実行するのが普通)
#code(javascript,nomenu,nonumber){{
#highlightjs(javascript){{
$.post("./test.php",   // 呼び出すPHP
{
  "query":"hoge"       // 送信するデータ.query=hogeをPHPに送る.
},function(response){  // コールバック関数.PHPからレスポンスが返ってきた
  alert(response);     //時に呼び出される.例えば返ってきた値をalertで表
});                    //示してみたり.
}}
+ PHPはこんな感じで
#code(php,nomenu,nonumber){{
#highlightjs(php){{
<?php
  if(!isset($_POST['query'])){  // パラメータが設定されてなかったら怒る
    exit("invalid query");
  }

  $response_str="";
  $query_str=$_POST['query'];   // パラメータ取得

  /* 何かしら処理する */

  echo $response_str;
  exit();
?>
}}

** BGM ShareHouseでの利用 [#z6bb2ef1]

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS