kawahara/test.html

## test.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <form id="search-form">
            <input id="keyword" name="keyword" value="" required>
            <input type="submit" value="検索">
        </form>
        <div id="search-result">
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
            // 初期化
            $(function() {
                // 出力用の関数
                var displayData = function(data) {
                    // id="search-result" の中身を空にする
                    $('#search-result').empty();
                    // ulタグを生成
                    var ul = $('<ul>');
                    $(data.Items).each(function(i, itemData) {
                        var item = itemData.Item;
                        // a タグを生成
                        var a    = $('<a>');
                        a.text(item.itemName + " " + item.itemPrice + "円");
                        a.attr('href', item.affiliateUrl);

                        // li タグを生成
                        var list = $('<li>');
                        list.append(a);

                        // ulタグに追加
                        ul.append(list);
                    });
                    // id="search-result" に ul タグを追加
                    $('#search-result').append(ul);
                };

                // APIコール
                $('#search-form').on('submit', function() {
                    var keyword = this.keyword.value;
                    $.ajax("https://app.rakuten.co.jp/services/api/IchibaItem/Search/20130805", {
                        // パラメータ
                        'data': {
                            'applicationId': '1025899060325418115',
                            'affiliateId': '0dd78f8a.26c4c8c0.0dd78f8b.0ee811d2',
                            'keyword': keyword
                        },
                        'success': displayData
                    });

                    return false;
                });
            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	</head>
	<body>
	<form id="search-form">
	<input id="keyword" name="keyword" value="" required>
	<input type="submit" value="検索">
	</form>
	<div id="search-result">
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>
	// 初期化
	$(function() {
	// 出力用の関数
	var displayData = function(data) {
	// id="search-result" の中身を空にする
	$('#search-result').empty();
	// ulタグを生成
	var ul = $('<ul>');
	$(data.Items).each(function(i, itemData) {
	var item = itemData.Item;
	// a タグを生成
	var a = $('<a>');
	a.text(item.itemName + " " + item.itemPrice + "円");
	a.attr('href', item.affiliateUrl);

	// li タグを生成
	var list = $('<li>');
	list.append(a);

	// ulタグに追加
	ul.append(list);
	});
	// id="search-result" に ul タグを追加
	$('#search-result').append(ul);
	};

	// APIコール
	$('#search-form').on('submit', function() {
	var keyword = this.keyword.value;
	$.ajax("https://app.rakuten.co.jp/services/api/IchibaItem/Search/20130805", {
	// パラメータ
	'data': {
	'applicationId': '1025899060325418115',
	'affiliateId': '0dd78f8a.26c4c8c0.0dd78f8b.0ee811d2',
	'keyword': keyword
	},
	'success': displayData
	});

	return false;
	});
	});
	</script>
	</body>
	</html>