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

はじめに

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

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

非同期について
JavaScriptはデータを送った後、サーバ側(PHP)から処理結果が帰ってくるのを待たずに、次のスクリプトの実行を続け、処理結果が帰ってきた時点で.then()内を実行します。

方法

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)とデータのやり取りをする