jQueryからajaxでPHPへPOSTして実行する

jQueryを使った、HTML(javascript)からPHPを実行し結果を返す方法です。jQueryでは簡単にPHPへ引数を渡してPHPを実行する事が出来ます。どんな事が出来るようになるかと言うとページ移動をせずに検索結果や絞り込みの表示やコメントの投稿を行うと自動でコメント部分だけ最新の状態に更新したり出来る。

jQueryでPHPへPOSTする

jQueryの処理

$.post(
  //PHPファイルの指定
  "ajax-return.php", 

  //POSTで渡す値の配列
  {
    name:"name",
    email:"email",
    title:"tile",
    comment:"comment",
  },
  
  //返り値を取得しての実行
  function( data ) {
    $( "body" ).html( data );
  }
);

まず最初にPHPを指定しています

次にPHPへ渡すPOSTの値を設定しています、配列形式で送ることが出来る。

最後に返り値を取得して、実行するものになっています

返り値はPHPを表示した時に表示されるHTMLが返り値となっています、PHP側でHTMLを生成してやればjQuery側では html() を使って特定の要素に出力し、例えばクリックをトリガーに更新するようのものとかだと html() で内をを上書きできるので、ページをリロードせずにその部分だけ更新される。

PHP側の処理

<?php
$title = "title";
$commnet = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque at necessitatibus quod, consequatur iusto voluptatum, perferendis libero, eos obcaecati voluptates sint voluptatem nulla. Praesentium obcaecati, iste minus perferendis porro nam.";
?>
<?php for($i=1;$i <= 10;$i++): ?>
<ul>
  <li>
    <div>
      <h3><?php echo $_POST["name"] ?></h3>
      <div class="content"><?php echo $_POST["comment"]." ".$i." - ".$commnet ?></div>
    </div>
  </li>
</ul>
<?php endfor; ?>

PHPでは $_POST で受け取ったPOSTの値を使って処理を行います。今回は、単純にHTMLに組み込んで返すケースです。$_POSTの値を元にDBへの書き込みや、DBからの読み込みを行ってHTMLで出力する事も出来ます。

HTML(jQueryで特定の要素をクリックをトリガーに$.postを行う)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
      $(document).ready(function(){
        $(".comment-submit").on("click",function(){
          $.post(
            "ajax-return.php",
            {
              name:"name",
              email:"email",
              title:"tile",
              comment:"comment",
            },
            function( data ) {
              $( "body" ).html( data );
            });
        });
      })
    </script>
  </head>
  <body>
    <div class="comment-submit">
      送信
    </div>
  </body>
</html>

jQueryの$.post を要素のclickをトリガーにしたものです。HTML全体ではこのような形になります。