Ajaxメモ

久々にどん詰まったのでメモよ
あけましておめでとうございます（順番が謎）

基本的な構造

$.ajax({
  url: 'ajax.php',
  type: 'POST',
  dataType: 'json',
  data: {
    value: $('.input').val(),
  }
})
.done(function(data){
  // 通信に成功したときの処理
})
.fail(function(data){
  // 通信に失敗したときの処理
})

大まかな流れとしては

通信についての設定を書く（url, type 等）
↓
通信したいファイルに送りたい値を設定する（data）
↓
通信が完了してからの処理を書く

url

そのまま。通信したいファイルを記載する
僕はPHPをどうこうしたいことがほとんどだけど、HTMLとかも使える 外部htmlを丸ごとor一部抜き取って埋め込むみたいな使い方をする

type

通信方式 所謂GET or POST
PHPでajaxを使う場合、要するに予め用意していたPHPファイルをJavaScriptから発火させるというだけでやることはPHPと変わらないんですね
ちなみに小文字でも可

dataType

通信先ファイルから返ってくるデータの形式を指定する
一方的な通信というか、発火をさせるだけで通信先からデータを貰ってJavaScriptでそのデータをこねくり回すみたいなことをやらないなら記述はいらないはず
PHPの戻り値として受け取りたいって場合はjsonが一番無難かな……（詳細は後述）

data

通信先ファイルに送信するデータをオブジェクト型で定義する
（PHPに送信する場合）送信したデータはPHP側でグローバル変数$_GETor$_POSTに格納される
すなわちこう

JS

// 前略
type: 'POST',
data: {
  'value': $object.val(),
  'text': '文章'
}

PHP

<?php
$value = $_POST['value']; // ＝$object.val()
$text = $_POST['text']; // ＝'文章'

PHP側で注意すること

JSの説明してPHPに飛んで（この後）JSに戻ってdone/failの説明ってなんか行ったり来たりって感じでちょっと忙しいが、先にPHPの説明しといた方が後の理解がしやすい（処理の順番がこうなので仕方ない……）と思うのでPHPのこと書きます

基本は普通に書いていいです、がいくつか気をつけておくべき点があります

返り値は「echo」

なんとなくreturnで返したくなる気持ちもありますが呼び出してるのは関数じゃなくてファイルそのものだからね echo 返したい値 で返してあげます

JSON形式に直してからechoする

まぁそもそも言語が違うからそのままデータを送ってもJS側は読めないんですね、僕もヒンディー語読めないし（？）
もしかしたらtext形式とかだと送れるんかもしれないけど（調べてない！）データ型がString一択になっちゃうし1個しか送れないんで不便、そんなわけでたくさんデータ保持できてデータ型もそのままに出来るJSON形式に直しちゃいましょう
JSONはJavaScriptで扱える配列とかオブジェクトみたいな見た目のデータ形式です
こんな感じ↓

data: {
  'int': 130, // ちゃんと数値になっている
  'text': '文章'
}

PHPの配列をJSON形式に変換するにはjson_encode()を使います
例えば

<?php
$array1 = [ 'quick', 'buster', 'arts' ];
$array2 = array(
  'green' => '緑',
  'red' => '赤',
  'blue' => '青'
);

上の2つの配列があります、これにjson_encode()をかけてやる（json_encode($array1), json_encode($array2)と

// array1
{
  "0": "quick",
  "1": "buster",
  "2": "arts",
}

// array2
{
  "green": "緑",
  "red": "赤",
  "blue": "青",
}

こんな感じのJSONファイルになります
一つ前に書いた返り値はechoという話を踏まえるとPHPからJSに値を戻してやる場合は

<?php
$array = array(
  // JSに渡したい値がいろいろ配列形式で入っている
);

echo json_encode($array); // ←ここ

という風に書いてやると良いということ

（function.phpみたいな）外部phpファイルはここでもrequireの必要がある

これはかなり自戒用が強いので飛ばしてもいいです

どうしても（呼び出し元のHTMLを描画している）PHPで既に呼び出してるから要らんやろうという感覚になっちゃって書かなくてもいいかな？と思ってしまうんだけどもう描画後なのでPHPはPHPではなくHTMLなんだよなぁ（これは328個人の感覚の話なのでわからなくてもいいです）
いずれにせよ関数とかを外部PHPに書いている場合はそれをちゃんと呼び出さなきゃいけないし、データベース接続も改めてPHP内で行う必要があります、画面描画用のPHPは処理を終了しているのでPHPとしては動きません

doneとfail

JSの話に戻ります
通信が無事成功したときの処理は.done(function(){、失敗したときの処理は.fail(function(){の中に書きます
通信先からの戻り値は.done(function(data){のdataの中に格納されます、なので戻り値をJS側で使う場合必ず関数の中に引数を入れましょう
どうでもいいけどこの文章打ってて今まで意味不明だったコールバック関数の本質が少し見えた気がした

引数に格納されたデータを使うにはdata['key']かdata.keyのどっちかで取り出せます どっちでもいいと思う

doneとfailはJSON形式を勝手にJavaScriptのオブジェクトに変換してくれる

これ最初「JSON形式を返すから変換が要るのでは！？」と思ってJSON.parse(data)（JSONをJSオブジェクトに変換する関数）を書いたのですが実はdone（orfail）のdataはJSON.parse(data)を通された状態、すなわち既にオブジェクトに変換された状態で格納されているらしいのです、なのでそこでまたJSON.parse(data)をしようとしたら既に変換されてるやで～とエラーを吐いてきます
処理いらずでそのままオブジェクトとして扱えるのですね、便利

おまけ：$(this)はajax処理の外で変数に格納したほうがいいと思う

まぁ冷静に考えれば当然なのですが、例えば複数あるボタンのどれかがクリックされたときにajax通信をする、みたいな流れだったらクリックイベント発動直後にまず$(this)を変数に格納し、その後からajax通信を開始する、みたいな流れがおそらくベター

$button.on('click',function(){
  $that = $(this); // まずここで$(this)を変数に入れちゃう
  $.ajax({ // その後に通信開始
    url: 'ajax.php',
    type: 'post',
    dataType: 'json',
    data: {
      'value': $that.val(), // クリックされた要素の属性とかを取得できる
    }

そんな感じ ajaxはまだしっかり身についてないのでもう少しいくつか作りたいですね