[jquery / php]jqueryでajaxを使う

最近、素のphpでajax通信をして、データ登録することがあったのですが
忘れていたことも結構あったので、いまさらですが復習の意味も込めて確認してみました。

jqueryとphpでajaxを使う時に、必要なメソッドやサンプルなどについて下記に書いています。

php
jquery
動作確認

php

サンプル

簡単なサーバーサイドのサンプルを書きました。
POSTでnameとageを受け取って、文字列にして、返しています。

<?php                                                                                                                                                                                                                                                      

$name = "name is ".$_POST['name'].".";
$age = "age is ".$_POST['age'].".";

echo json_encode(['messages' => [$name, $age]]);
exit;

json_encodeを使って、json形式で値を返さないとparseエラーになります。
(jqueryでfailの方に入ってくる…)

終わったらexitして処理を止めておきましょう。
それぞれの関数の説明は下記。

json_encode

公式マニュアルはこちら

json_encodeは与えた変数をjson形式にして返してくれます。
上記の例で言うと、{“messages”:[“name is xxx.”,”age is xxx.”]}みたいなjson形式になります。

exit

公式マニュアルはこちら
exitは呼び出すと、その場でスクリプト停止してくれます。

ajaxで結果を出力した後は、処理は進めなくていいので無駄な出力が出ないように止めておいた方が無難そうですねー

jquery

google hosted library(CDN)を使う。

下記がリンクになっているので、それぞれ読み込むと使えます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

サンプル

jqueryでnameとageをphpにPOSTするよう書いてみました。

googleにホストされている、3.5.1, 2.2.4, 1.12.4のそれぞれのバージョンで動かしましたが、動きました。
doneとかfailとかも１系から使えたんですね🤯

<!DOCTYPE html>                                                                                                                                                                                                                                            
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    $(function(){
      $("#test_btn").click(function() {
        let name = $("[name='name']").val();
        let age = $("[name='age']").val();

        $.ajax({
          type: 'POST',
          url:'ajax.php',
          data: { name: name, age: age} 
        }).done(function(data, textStatus, jqXHR){
          console.log("成功", data, textStatus);
          let result = JSON.parse(data);

          let text = '';
          for(let key in result.messages) {
            text += result.messages[key] + '\n';
          }

          $("#ajax_return").text(text);
        }).fail(function(jqXHR, textStatus, errorThrown){
          console.log("失敗");
        }).always(function(){
          console.log("処理が終わるとここ通る");
        });
      });
    });
    </script>
  </head>
  <body>
    <input type="text" name="name" placeholder="名前" /><br>
    <input type="text" name="age" placeholder="年齢" /><br>
    <button id="test_btn">test ajax!</button><br><br>

    <textarea id="ajax_return">
    </textarea>
  </body>
</html>

jquery.ajax()

公式のドキュメントはこちら！
みてみるといろいろオプションがありますね😳

ajaxで非推奨ですが、下記のように書くこともできます…
1.4以前の書き方のようです。doneがsuccessでfailがerrorですね。

みづらい感があるので、done, fail方式で書くように注意します。

$.ajax({
  type: 'POST',
  url:'ajax.php',
  data: { name: name, age: age},
  success: function(data){
    console.log("成功", data);
    let result = JSON.parse(data);
    let text = '';

    for(let key in result.messages) {
      text += result.messages[key] + '\n';
    }

    $("#ajax_return").text(text);
  },
  error: function(data) {
    console.log("error", data);                                                                                                                                                                                                                            
  }
});