[JavaScript]JSONデータをPOSTで送信する

投稿者:

JSONデータを送信するにはXMLHttpRequestオブジェクトを使用する。

XMLHttpRequestは非同期処理で通信することが可能なため、ページ全体を更新することなくデータの受送信ができる。詳しい解説はこちらを見ていただくとして、以下にサンプルを記す。

/*-----------------------------
    JSONデータを送信する
    引数:なし
    戻値:なし
--------------------------------*/
function sendJsonData() {
    //連想配列
    var json_asocc = 
        [
            {
                'maker'     : 'MAZDA',
                'model'     : 'DEMIO',
                'grade'     : 'XD L pakage'
            },
            {
                'maker'     : 'Peugeot',
                'model'     : '206',
                'grade'     : 'XT'
            },
            {
                'maker'     : 'Rover',
                'model'     : 'MINI',
                'grade'     : 'Cooper 35th Anniversary'
            }
        ];
    
    //JSONにエンコード
    var json_text = JSON.stringify(json_asocc);

    //データを送信
    xhr = new XMLHttpRequest;       //インスタンス作成
    xhr.onload = function(){        //レスポンスを受け取った時の処理(非同期)
        var res = xhr.responseText;
        if (res.length>0) alert(res);
    };
    xhr.onerror = function(){       //エラーが起きた時の処理(非同期)
        alert("error!");
    }
    xhr.open('post', "api_sendjson.php", true);    //(1)
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(json_text);    //送信実行
}

(1)のopenメソッドの第二引数は仮のものなので注意。第三引数はtrueだと非同期処理で送信され、falseにするとsend()のレスポンスが返るまで待機する。通常はイベントハンドラonloadにレスポンス受信後の処理を書いて非同期で実行するのが良い

サンプルの関数を実行するとJSONデータがPOSTで送信される。サーバ側で受け取ったデータをどう処理するかは、こちらを参考にしていただきたい。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください