[jQuery] AjaxでJSONデータを読み込む – 端くれプログラマの備忘録

サンプル

サーバーから最新のドル円レートをJSON形式で取得して、フロントエンドのUS$価格にJPY換算価格を付記する。

フロントエンド

<script>
$(function() {
    $.ajax({
        url: 'currency.php',
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json',
    }).done(function(data) {
        var rate = data.USD;
        $(".price").each(function() {
           var usd = $(this).attr('data-value');
           var jpy = Math.floor(usd * rate);
           $('.jpy', this).text('(円換算 ' + jpy + '円)');
        })
    }).fail(function(data) {
        console.log('failed');
    });
});
</script>
        
<h1>Prices</h1>
<ul>
    <li class="price" data-value="19.99">$19.99 <span class="jpy"></span></li>
    <li class="price" data-value="29.99">$29.99 <span class="jpy"></span></li>
    <li class="price" data-value="39.99">$39.99 <span class="jpy"></span></li>
    <li class="price" data-value="49.99">$49.99 <span class="jpy"></span></li>
</ul>

$(function() {

$.ajax({

url: 'currency.php',

type: 'POST',

dataType: 'json',

contentType: 'application/json',

}).done(function(data) {

var rate = data.USD;

$(".price").each(function() {

var usd = $(this).attr('data-value');

var jpy = Math.floor(usd * rate);

$('.jpy', this).text('(円換算 ' + jpy + '円)');

})

}).fail(function(data) {

console.log('failed');

});

</script>

<h1>Prices</h1>

<ul>

</ul>

currency.php

<?php

$usd = function(); //ドル円レートを取得

$array = array('USD' => $rate);
echo json_encode($array);

?>

<?php

$usd = function(); //ドル円レートを取得

$array = array('USD' => $rate);

echo json_encode($array);

参考サイト

Ajax – jQuery 入門
http://jquery.keicode.com/basics/ajax.php

jQueryを使ったAjaxに関するサンプル集
http://alphasis.info/jquery-api/gyakubiki/ajax/

jQuery.ajax() | jQuery API Documentation
http://api.jquery.com/jquery.ajax/

jQuery.ajax(options) – jQuery 日本語リファレンス
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

サンプル

参考サイト

関連記事