jqueryを使ってajaxでjsonのファイルを取得する方法をご紹介します。 ある特定の商品ごとに「商品名」「値段」を切り替えるjs処理を実装しました。
管理しやすいように商品情報をまとめたjsonファイルを用意します。
それをajaxで取得してきて対象の商品ごとに出力をしたいと思います。 ajaxを普段扱う場面がなかったので、基本を振り返るいい機会になったので備忘録として。。。
jsonを用意
まずはjsonのデータを用意。今回は例として、file.jsonを作成し、その中に商品情報を記載します。 typeキーに商品名・priceキーに金額を設定します。
{
"1": {
"type": "商品名001",
"price": "100"
},
"2": {
"type": "商品名002",
"price": "200"
},
"3": {
"type": "商品名003",
"price": "300"
}
}jsonを取得
file.jsonを取得する場合で記載します。 urlで取得するファイル名を指定。dataTypeでファイルの形式を指定します。$(function() {
$.ajax({
type: 'GET',
url: 'file.json',
dataType: 'json'
})
.then(
// 取得成功時
function (json) {
},
function () {
// エラー発生時
alert('エラー時に表示されるテキスト');
}
);
});jsonを出力
取得したjsonのデータを出力します。json[1].type //商品名001
json[1].price //100$(function() {
$.ajax({
type: 'GET',
url: 'file.json',
dataType: 'json'
})
.then(
// 取得成功時
function (json) {
json[1].type //商品名001
json[1].price //100
},
function () {
// エラー発生時
alert('エラー時に表示されるテキスト');
}
);
});