素材の壺

REST-APIとかXMLHttpRequest(XHR)とかって環境でデータを受け取りたくて、AjaxでJSONを処理するはずがうまく処理できない、という事態に陥った時のメモ。まずはうまく処理できなかった時のAjax周りの記述。

JSONをうまく処理できなかった時の記述

$(window).load(function() {
jQuery.ajax ({
    url: myurl,
    type: "POST",
    data: {data:"test"},
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(){
        // 成功時の処理
    }
});
});

これでsuccessに至らず。コンソールを確認したところ、「Content-Type:”application/json;charset=UTF-8″」でないといけないところが「Content-Type:”text/plain”」と認識されている様子で、JSONとして受け取ってもらえていない事が原因のようでした。そこで下記のように「JSON.stringify()」メソッドを追記してdataの値をJSON文字列に変換する事で、無事に解決しました。

JSONを処理できた記述

$(window).load(function() {
jQuery.ajax ({
    url: myurl,
    type: "POST",
    data: JSON.stringify({data:"test"}),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(){
        // 成功時の処理
    }
});
});

通常のAjax処理であればdataにJSONをそのまま書いても動作していたような気がするのでXHRだからなのかは不明ですが、きっと「JSON.stringify()」を基本としておいた方が無難だなという気がしました。引数にreplacer関数も使えるので、必要なデータに絞り込んだりも出来ますね。AjaxでJSONを処理できない時の対処法「JSON.stringify()」でした。