【Javascript】$.ajaxを使ってサーバ（PHP）にデータを渡す方法

はじめに

Ajax「Asynchronous JavaScript + XML」を使ってJavaScriptからサーバ側（PHP）にデータを渡す事ができます。

サーバ側でデータを受け取って処理した後、JavaScript側に処理結果を返す事もできます。Ajaxは基本的に非同期で実行されます。

方法

javascript側

const data = 'Hello World！'; // 渡したいデータ

$.ajax({
    type: "POST", //　GETでも可
    url: "request.php", //　送り先
    data: { 'データ': data }, //　渡したいデータをオブジェクトで渡す
    dataType : "json", //　データ形式を指定
    scriptCharset: 'utf-8' //　文字コードを指定
})
.then(
    function(param){　 //　paramに処理後のデータが入って戻ってくる
        console.log(param); //　帰ってきたら実行する処理
    },
    function(XMLHttpRequest, textStatus, errorThrown){ //　エラーが起きた時はこちらが実行される
        console.log(XMLHttpRequest); //　エラー内容表示
});

jQueryを使っているので、事前にjQueryを読み込む必要があります。

サーバ（PHP）側

request.php

<?PHP
header('Content-type: application/json; charset=utf-8'); // ヘッダ（データ形式、文字コードなど指定）
$data = filter_input(INPUT_POST, 'データ'); // 送ったデータを受け取る（GETで送った場合は、INPUT_GET）

$param = $data;	//　やりたい処理

echo json_encode($param); //　echoするとデータを返せる（JSON形式に変換して返す）

まとめ

$.ajaxを使った方法は比較的古い方法です。最近はFetchを使う事が主流です。同じような書き方で同様の事ができます。Fetchの使い方については、以下の記事。

【Javascript】Fetchを使ってサーバ（PHP）とデータのやり取りをする