• ベストアンサー

別URLからのJSON取得がうまくいかないので教えてください

楽天書籍検索APIをJSONで取得したいのですが、うまく表示されません。 以下のソースで何がまずいか教えていただけますでしょうか。 ※[YOUR_developerID]にはIDが入っているものとします <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JSON</title> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.2.6");</script> <script type="text/javascript"> $(function(){ $.getJSON("http://api.rakuten.co.jp/rws/2.0/json?developerId=[YOUR_developerID]&operation=BooksTotalSearch&version=2009-03-26&keyword=%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0&sort=-releaseDate", function(jsonData){ $(jsonData.Body.BooksBookSearch.Items.Item).each(function(){ $("body").append(this.title+"<hr />"); }) }) }) </script> </head> <body>

  • abiru
  • お礼率67% (37/55)

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

$関数は存在しますか? JSONPは実行されていますか?(コールバック関数は呼び出されていますか?) $("body")は存在しますか? jsonData.Body.BooksBookSearch.Items.Item.title の構造は、受け取ったJSONデータの構造と一致してますか?

abiru
質問者

お礼

どうもJSONPになっていないようで、元のデータがおかしいようです。 ありがとうございました。

その他の回答 (1)

  • t_netbug
  • ベストアンサー率34% (15/44)
回答No.1

リクエストパケットを飛ばしているのは確認出来てますか? 多分、画面上は飛ばしているように見えるけど、実際には飛ばしていないとかそんな気がします。 そもそも、ドメインが違うとAjaxの非同期通信を行うのって不可能じゃなかったでしたっけ…。

abiru
質問者

お礼

どうもJSONPになっていないようで、元のデータがおかしいようです。 ありがとうございました。

関連するQ&A

  • このソースどういう意味ですか【JavaScript】

    <HTML> <HEAD> <TITLE>JavaScript Sample</TITLE> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> </HEAD> <BODY> : <INPUT TYPE="button" VALUE="OK" onClick="~"> : </BODY> </HTML> このソースの中の <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> の部分ってどういう意味ですか? 特にTypeとHTTP-EQUIVの部分については個別で詳しく知りたいです。 回答よろしくお願いします。

  • JavascriptでObjectからJSON形式変換するにはどうすればいいでしょうか?

    toSourceだと少し違うし、どうすればいいのでしょうか。簡単に変換できる関数でもあればいいのですが、わかりませんでした。 どなたかご教授お願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>objctからJSONに変換</title> <script type="text/javascript"> obj = new Object(); obj.test = "txt"; str = obj.toSource(); document.write(str); //--> </script> </head> <body> </body> </html>

  • ModalBoxのIEでの表示について

    質問です。 javascriptの「ModalBox」についてなのですがModalBox内で指定したhtmlファイルがIE7では表示されません。Firefoxでは表示されるのですが・・・なぜでしょう? 一応javascriptは表示され上からウィンドウは表示されるのですが中身の内容がでてきません(Firefoxなら表示されます) ソースですが 表示するボタンがある側↓----------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ModalBox サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="modalbox.css" type="text/css" media="all"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="lib/prototype.js"></script> <script type="text/javascript" src="lib/scriptaculous.js"></script> <script type="text/javascript" src="modalbox.js"></script> </head> <body> <h1>ModalBoxサンプル</h1> <a href="sample.html" title="Sample 1" onclick="Modalbox.show(this.href, this.title); return false;">ダイアログを表示</a> </body> </html> --------------------------- 表示されるhtml側↓ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> </head> <body> サンプル </body> </html> ----------------------------- となっています。 調べたところIE7にも対応しているとの事なのですが何故でしょうか?

  • JSONを使いページから他ページへ情報を渡す方法

    同じレイアウトのページが数百ページあり、各ページの一部分を1つのページにまとめる方法を知りたいです。 JSONでできるようなので、サイトを参考にしながら作ってみました。 各ページの集めたい部分をオブジェクトで指定してJSONのテキストへ変換し、 集めたページにJSONを読み込み、変数に代入したJSONの情報を取得して表示を試みました。 しかし、やってみるとページ間で同じデータを扱うのが上手にできませんでした。 アドバイスを頂けないでしょうか。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>集めたページ</title> <script type="text/javascript" src="js/json.js"></script> </head> <body onload="jsontop()"> <div> <ul> <li><a href=""><span></span></a></li> <li><img src=""></li> </ul> ・・・・・・ULがページ数の数だけ続く </div> </body> </html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>各ページのサンプル</title> <script type="text/javascript" src="js/json.js"></script> </head> <body onload="json(1)"> <h1>1ページ目</h1> <h2>タイトル</h2> <p>複数ページある中の1ページ目です。このページの一部分を他のページに利用したいです。</p> <dl> <dt>サンプル画像</dt> <dd><img src="img/sample01.jpg"></dd> </dl> </body> </html> -----json.js------ function json(no){ var obj = { h1: no+"ページ目", imgsrc: "img/sample0"+no+".jpg", thisurl:"page01/sample01.html" }; var str = JSON.stringify(obj); } function jsontop(){ JSON.parse(str); var tagimg = document.getElementsByTagName("img"); var tagspan = document.getElementsByTagName("span"); var tagli1 = document.getElementsByTagName("li")[0]; tagspan[0].innerHTML = obj.h1; //1ページ目のタイトルを取得し置き換える var img = new Image(); tagimg[0].src = obj.imgsrc; //1ページ目の画像のパスを取得し置き換える tagli1.href = obj.thisurl; //1ページ目のURLをアンカーに設定 }

  • リダイレクト時のURLクエリ文字列の取得

    hoge.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=euc-jp" /> </head> <body> <script language="javascript"> <!--// function windowOpen() { window.open("hoge.php?name=" + document.getElementById("data").value, "new_window"); } --> </script> <input type="text" id="data" /> <input type="button" value="new window" onclick="windowOpen()" /> </body> </html> hoge.php <html> <head> <meta http-equiv="content-type" content="text/html; charset=euc-jp" /> </head> <body> <?php echo $_GET['name']; ?> </body> </html> このようなスクリプトがあった時(表示の際の文字コードは任意で)、 文字列をエンコードせずJavaScriptからURLをリダイレクトさせている為、 IE6では、PHP側の$_GET['name']が正常に受け取る事が出来ません。 (Firefoxではアクセスした時点で自動的にURLエンコードしてくれるので 問題ないのですが) これを、JavaScript側でURLエンコードさせてからリダイレクトさせるのではなく、 PHP側で回避させる為にはどういった作業をどういう手順で行えばいいのでしょうか?

    • ベストアンサー
    • PHP
  • 新ウィンドウの画像をクリックして閉じる

    画像を載せたホームページを作成しています。 target="_blank"で新ウィンドウで開いた画像をクリックして、新ウィンドウを閉じるにはどうしたら良いのでしょうか? これじゃダメなんでしょうか? <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <SCRIPT LANGUAGE="JavaScript"> <!-- function WinCls(){ window.close() } //--> </SCRIPT> <TITLE></TITLE> </HEAD> <BODY> <A href="aaa.jpg" javascript:WinCls()" target="_blank"><IMG src="aaa.jpg"></A> </BODY> </HTML>

  • JSONのデータから商品名の取得の仕方

    今現在下記の記述でJSONを取得しています。 ===== <html> <head> <title>JSONのデータを使ってみる</title> </head> <script type="text/javascript" src="./prototype.js"></script> <script type="text/javascript"> function execute() { var url = './ItemSearch_json.php'; var paramList = "keyword=" + encodeURIComponent("ふくろう"); var a = new Ajax.Request( url, { method: 'get', parameters: paramList, onSuccess: function(request) { // alert('読み込み成功しました'); // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onComplete: function(request) { alert('読み込みが完了しました'); $('container').innerHTML = request.responseText; // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } ); } </script> <body> <div id="container">content</div> <button onclick="execute()">サンプル実行</button> </body> </html> ===== このままだと、プレーンテキストは表示されるのですが、商品名や価格の一覧などを選択して表示できません。 evalなどを使うのかなと思うのですが、はっきり分かりません。 ヒントを教えていただけないでしょうか。

    • ベストアンサー
    • AJAX
  • 背景に指定したイメージ以外の余白を見せないようにする方法は?

    こんにちは!まさにタイトル通りの質問です。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <META NAME=""> <META NAME=""> <META NAME=""> <META NAME=""> <META http-equiv="refresh" content="5;url=test.html"> <SCRIPT LANGUAGE="JavaScript"> <!-- function resizeWindow(){      window.resizeTo(720,580);  } //--> </SCRIPT> <title>test</title> <style type="text/css"><!-- body { background-repeat:no-repeat;} --></style> </HEAD> <body onLoad="resizeWindow()" background="top4.jpg" width=720 height=580 > </body> </HTML> としていますが、窓を大きくしたりすると右や下に余白が見えてかっこわるいです。どうすれば改善しますか? お願いします☆

    • ベストアンサー
    • HTML
  • javascriptでselectboxのvalueを取得し、特定のv

    javascriptでselectboxのvalueを取得し、特定のvalue値により、「<input type="text" name~>」をブラウザに表示させたいのですが、やり方がわかりません。 javascriptについて素人です。 jQUERYを使用して、phpのようにif文を追加したらいけるのかなと思って下記のようにやってみたのですが、更新しないと変わりませんでした。。 どなたかお力を貸して下さい!どうか宜しくお願い致します! ========================================== <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <meta name="robots" content="noindex,nofollow" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="/admin/js/jquery-1.2.3.js" ></script> <script type="text/javascript"> $(function() { hogehoge = $("#abcdefg").val(); if(hogehoge !== '3'){ $('#hijklmn').hide(); } }); </script> </head> <body> <form method="post" action="/admin/~"> <select id="abcdefg"> <option value="1">aaaaaaaa</option> <option value="2">bbbbbbbb</option> <option value="3">cccccccc</option> </select> <div id="hijklmn"> 上のセレクトボックスが3の場合のみ、下記のフォームを表示させたい <input type="text" value="ああああああああ" /> </div> </form> </body> </html>

  • JSの記述を別ファイルに移す

    下記のHTML内の <script type="text/javascript">~</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>