[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>

currency.php

<?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/