jQuery ajaxの書き方 基本

用途

JavaScriptの値をPHPに渡して、PHPで処理をしてからJavaScriptに返し、返り値をJavaScriptで使用したい時に使う。
jQueryでajaxを使用したい時に使う。

使用方法

ajaxでの渡し方とPHPでの受け取り方

①PHPに渡したいデータが1つの時

ajax　渡したいデータが1つ

$.ajax({
  type: "POST", // GET,POSTを指定。この場合はPOST。GETにしたいならPOSTをGETに変えるだけ。
  url: "◯◯◯◯◯◯◯", // 使用したいPHPファイルを指定。hoge.phpを使用したいなら、hoge.phpと入力。
  data: {key:value} // PHPの処理で使う渡したいデータ。keyは自分で命名、valueは渡したい値。
}).done(function (PHPでの処理の結果) {
  // 通信成功時の処理
}).fail(function () {
  // 通信失敗時の処理
}).always(function () {
  // 成功や失敗にかかわらず常に実行する処理
});

PHPでの受け取り方

<?php
  // 受け取り方
  $_POST['key'] // ajaxのdataで指定したkeyをtypeで指定した形で受け取る
  
  // 処理を書く

②PHPに渡したいデータが複数の時

ajax 渡したいデータが複数

var data = {key1:value1, key2:value2, key3:value3, key4:value4}; // keyは自分で命名、valueは渡したい値。
$.ajax({
  type: "POST", // GET,POSTを指定。この場合はPOST。GETにしたいならPOSTをGETに変えるだけ。
  url: "◯◯◯◯◯◯◯", // 使用したいPHPファイルを指定。hoge.phpを使用したいなら、hoge.phpと入力。
  data: data // PHPの処理で使う渡したいデータ
}).done(function (PHPでの処理の結果) {
  // 通信成功時の処理
}).fail(function () {
  // 通信失敗時の処理
}).always(function () {
  // 成功や失敗にかかわらず常に実行する処理
});

または

ajax 渡したいデータが複数

$.ajax({
  type: "POST", // GET,POSTを指定。この場合はPOST。GETにしたいならPOSTをGETに変えるだけ。
  url: "◯◯◯◯◯◯◯", // 使用したいPHPファイルを指定。hoge.phpを使用したいなら、hoge.phpと入力。
  data: {  // PHPの処理で使う渡したいデータ。keyは自分で命名、valueは渡したい値。
    key1:value1,
    key2:value2,
    key3:value3,
    key4:value4
  }
}).done(function (PHPでの処理の結果) {
  // 通信成功時の処理
}).fail(function () {
  // 通信失敗時の処理
}).always(function () {
  // 成功や失敗にかかわらず常に実行する処理
});

PHPでの受け取り方

<?php
  // 受け取り方
  $_POST['key1'] // jsのvalue1が渡される。typeで指定した形で受け取る。
  $_POST['key2'] // jsのvalue2が渡される。typeで指定した形で受け取る。
  $_POST['key3'] // jsのvalue3が渡される。typeで指定した形で受け取る。
  $_POST['key4'] // jsのvalue4が渡される。typeで指定した形で受け取る。  

  // 処理を書く

PHPでの返し方

①echo　json_encode
※配列またはオブジェクトをそのまま返すとエラーになる。

echo　json_encode

  // ajaxからのデータを受け取る
  // 処理を書く

  //javascriptに受け渡すため配列をJSON形式に変換
  echo json_encode($hoge); // hogeはajaxに返したい値
  exit;

②return

return

  // ajaxからのデータを受け取る
  // 処理を書く

  if (条件) {
    return true;
  } else {
    return false;
  }