jQueryでjsonpを受け取って表示ができない

質問

質問させてください。

jQueryの$.ajax(option)を使って楽天APIからjsonでデータを取ってきて表示、という処理をさせたいのですが、うまくいきません。

以下ソースです。

----
$(function() {
$("#form").submit(function(){　//フォームから値受け取る
search($("#keyword").val());
return false;
});
});
function search(keyword) {

$("#hoge").text("now loading");

$.ajax({
dataType: "jsonp",
data: {
"developerId" : "dev_id",
"affiliateId" : "aff_id",
"operation" : "ItemSearch",
"version" : "2007-04-11",
"genreId" : "0",
"keyword" : keyword
},
url: "http://api.rakuten.co.jp/rws/1.7/json",
success: function (data) {
$("#hoge").empty();
$.each(data.Body.ItemSearch.Items.Item, function(i,item){

$("<a/>")
.attr("href", item.affiliateUrl)
.append("<img src='" + item.smallImageUrl + "'/>")
.appendTo("#hoge");
});
}
});
}
----

こちら実行すると、Firebugでは楽天APIから取ってきたデータに対して、
「invaild lavel」というエラーが出ます。

jsonのデータは以下のようなものです。
----
{"Body":{"ItemSearch":{"Items":{"Item":[{"postageFlag":1,"itemName":"【正規品】 レッグマジック夏が来た！1セットたったの60秒　30日間の返品保証付き","shopOfTheYearFlag":1,"affiliateRate":4.9,"smallImageUrl":"http://image.rakuten.co.jp /wshop/data/ws-mall-img/shopjapan/img64 /img10303447601.jpeg","endTime":"","itemPrice":14700,"taxFlag":0,"startTime":"","shopCode":"shopjapan","affiliateUrl":"http: //***4/?pc=http %3A%2F%2Fwww.rakuten.co.jp%2Fshopjapan%2F651695%2F616400%2F806153%2F %23859729","itemCaption":"セット内容／本体x1、ワークアウトDVD（日本語吹替版）x1、日本語取扱説明書×1、組み立て工具x1 サイズ／本体：約幅107x奥行き46.5x高さ(最大)99cm 重量／約10kg 材質／スチール他保証書付／1年中国製送料／1260円 お届期間／約1週間",
----

以上、宜しくお願い致します。

回答No.1

noname#137826

楽天APIでは、コールバック関数名は"callBack"(Bが大文字)で指定することが原因ではないでしょうか。
$.ajaxの引数に、{"jsonp" : "callBack"}を追加してはどうでしょう？

$.ajax({
dataType: "jsonp",
data: {
"developerId" : "dev_id",
"affiliateId" : "aff_id",
"operation" : "ItemSearch",
"version" : "2007-04-11",
"genreId" : "0",
"keyword" : keyword
},
url: "​http://api.rakuten.co.jp/rws/1.7/json",​
success: function (data) {
$("#hoge").empty();
$.each(data.Body.ItemSearch.Items.Item, function(i,item){
$("<a/>")
.attr("href", item.affiliateUrl)
.append("<img src='" + item.smallImageUrl + "'/>")
.appendTo("#hoge");
});
},
jsonp: "callBack" // これを追加
});

参考URL：

http://webservice.rakuten.co.jp/api/simplehotelsearch/,http://docs.jquery.com/Ajax/jQuery.ajax#options

お礼

ご回答ありがとうございます。
ご指摘のものは試してみたのですができませんでした。

色々試してみたら、jsからPHPに値を渡す方法で出来ました。
ご協力ありがとうございました。