jQueryとPHPのPOST通信

 jQueryではその他のCGIやPHPにポストできます。Javascriptを使用するわけでいわゆる非同期通信といわれるものでリアルタイムにPHPスクリプトの結果を表示したりすることができます。実にAjax的な動きをするわけです。
 通常のPHPのようにファイルを行き来してサーバーサイドで実行するのではなくて、サーバーサイドの実行スクリプトはクライアントには殆ど意識されないような状態で実行できます。ここではPOSTで値を渡す方法を説明します。

 単純にフォームから値を渡すには、フォームをHTMLタグで組んでからjQueryでリアルタイムに値を取得します。その値はそのままPHPファイルに渡されて同様にリアルタイムに表示することができます。
Sample Demo
 keyupイベントを利用しているのでインプットした文字列から順番にリアルタイムに表示が可能になります。サンプルのPHPファイルでは単に渡されたPOSTの値を表示するだけですが、実際のアプリケーションではもっと複雑な処理が可能です。ここでの機能は、検索機能のような場合に応用できます。

$.post

 jQueryのAjaxの機能といいますか、APIの機能といいますか...そこらあたりの機能として$.post()があります。これは実行スクリプトにPOSTでもって値を渡すことができます。(お気づきの方も多いと思いますが、もちろん$.getもあります。)
$.post( <実行スクリプトのURL>, <POSTで渡す値>, <callback>, <タイプ> )
 成功時のみ実行されるというもので成功時と失敗時の制御構造を取り入れたい場合は、$.Ajaxを使わないとダメみたいです。そこまで複雑なものが必要のない場合は$.postで十分です。

解説

 最初にフォームをHTMLタグで作っておきます。
<form id="searchform" method="post">
    <label for="text">input text</label><br />
    <input type="text" name="text" id="text" /><br />
    <input type="text2" name="text2" id="text2" /><br />
</form>

<div id="search_results"></div>
 わかりやすいようにここでは二つのinputフィールドを作成しています。注意すべき点は、formタグ内にaction=""というものがないことです。jQueryが直接PHPファイルに値を渡してくれるのでactionが必要ないからです。jQueryはタグのidやclassを頼りに値を取り出すので、ここではinputタグにidを指定してやります。これでinputの値を非同期的にphpファイルにpostすることができます。
 また<div id="search_results"></div>でもって表示領域を確保しておきます。jQueryで後からこの部分にポストの内容を表示するようにします。

次にjQueryでinputされた値を取り出してPHPファイルに渡してあげます。
<script type='text/javascript'>
$(function(){
$("#search_results").slideUp();
    $("#text, #text2").keyup(function(){
        ajax_post();
    });

});
function ajax_post(){
  $("#search_results").show();
  var search_val = $("#text").val();
  var search_val2 = $("#text2").val();

  $.post("./post.php", {text:search_val,text2:search_val2}, function(data){
   if (data.length>0){
     $("#search_results").html(data);
   }
  })
}
</script>
 $(function(){...でもってjQueryを開始します。それから#search_results(表示領域)をスライドアップさせて見えるようにします。inputフィールドに与えられた値をkeyupイベントでもって取得。それからajax_post();という関数を実行します。その関数を最後に記述します。
 ajax_post();関数では、#search_resultsを表示できるようにします。次にinputフィールドに入力された値をそれぞれ変数に格納しています。格納された値は、post.phpというphpの実行ファイルに渡してやります。先のフォーマットにしたがって、
$.post("./post.php", {<POSTのname>:<POSTの値>,...}
という感じになってます。POSTの値はスカラーだの配列だのでいろいろな渡し方ができるのですが、ここではカンマ切りで複数の値が渡せることができれば十分なので後は割愛。(コールバックとタイプも長くなるので割愛)
 渡された値をdataに取り込んで軽く制御。値が入ってきたら(data > 0)、表示させるようにしています。

 






プロフィール



  • Name :: 山上オサム ♂(37)
  • Hobby :: 武術
  • Work :: Web Designer