質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

2回答

2581閲覧

"response body only accepts well-formed JSON" が返る

hsk

総合スコア728

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2016/09/19 08:23

お世話になっております。
WEBAPI 初挑戦で、楽天市場API(楽天市場商品検索API)を試してみています。
jQuery の CDN には、公式の 2.0 系を使用しています。

次のようなhtmlを書いて[検索]ボタンをクリックすると(ID 文字列は変えてあります)

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5<title>タイトル</title> 6<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="[URLを取得したときのコード]" crossorigin="anonymous"></script> 7<script> 8function test() 9{ 10 var keyword = encodeURIComponent("サンプル"); 11 var url = "https://app.rakuten.co.jp/services/api/IchibaItem/Search/20140222?format=json&keyword=" + keyword + "&applicationId=[楽天アプリID]"; 12 alert(url); 13 14$.ajax({ 15 "url": url, 16 "type": "POST", 17 "scriptCharset":"utf-8", 18 "dataType":"json", 19 "timeout":10000 20}).done(function(data, status) { 21 alert(data); 22}).fail(function(data, status) { 23 alert(status); 24 alert(JSON.stringify(data)); 25}); 26} 27</script> 28</head> 29<body> 30<button onclick="test();">検索</button> 31</body> 32</html>

最初に "error"、次に以下のようなアラートが表示され、エラーになったことがわかります。

json

1{"readyState":4, 2 "responseText":"{\"error\":\"wrong_parameter\",\"error_description\":\"response body only accepts well-formed JSON\"}", 3 "responseJSON":{"error":"wrong_parameter","error_description":"response body only accepts well-formed JSON"}, 4 "status":400, 5 "statusText":"Bad Request" 6}

メッセージからすると、レスポンスの JSON フォーマットが綺麗でないのでダメ!(楽天API と jQuery2.0 との組み合わせでは使えない)のような意味合いに読めますが、世の中ではたくさん使われていることでしょうし、私のコードでおかしなところがあるのだと思います。ご指摘下さると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

動作確認済み

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>タイトル</title> 6 <script src="//code.jquery.com/jquery-2.2.4.min.js"></script> 7 <script> 8 $(function () { 9 $('button').on('click', function () { 10 var keywords = $('#keyword'); 11 var url = "https://app.rakuten.co.jp/services/api/IchibaItem/Search/20140222"; 12 13 $.ajax({ 14 url: url, 15 type: "GET", 16 scriptCharset: "utf-8", 17 dataType: "jsonp", // クロスドメインなので jsonp 18 timeout: 10000, 19 data: { 20 format: "json" 21 , keyword: keywords.val() 22 , applicationId: "アプリケーションID" 23 } 24 }).done(function (data, status) { 25 $.each(data.Items, function (k, it) { 26 var item = $('<p>'); 27 item.text(it.Item.itemName) 28 .appendTo($('#response')); 29 }); 30 }).fail(function (data, status) { 31 console.log(status); 32 alert(JSON.stringify(data)); 33 }); 34 35 }); 36 }); 37 </script> 38 </head> 39 <body> 40 <input type="text" name="keyword" id="keyword" /> 41 <button type="button">検索</button> 42 43 <div id="response"> 44 45 </div> 46 </body> 47</html>

投稿2016/09/19 09:33

編集2016/09/19 09:44
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hsk

2016/09/19 10:39

コードまで作成していただいて、どうも有り難う御座いました! うまく受信、表示までなされました。
guest

0

多分ですが、"dataType":"json"でこれから送るのはapplication/jsonですと相手に伝えているのに
実際はdataを指定していないのでリクエストボディが空になっているのではないでしょうか。
APIドキュメントを見た感じメソッドはPOSTじゃなくてGETでいいように思えます。
dataTypeの行を消して、typeをGETにしてみたら何か変化はありませんか?

楽天商品検索API (version:2014-02-22)
https://webservice.rakuten.co.jp/api/ichibaitemsearch/

投稿2016/09/19 09:00

nnssn

総合スコア1221

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hsk

2016/09/19 10:20

どうも有り難う御座います。 $.ajax({ "url": url, "type": "GET", "scriptCharset":"utf-8", "timeout":10000 })... と変更してみたのですが、errorになってしまいます。ただし、メッセージは {"readyState":0,"status":0,"statusText":"error"} といった不可解な内容です。 おっしゃる通り、パラメータをQUERYSTRINGで渡しているので、GETが正しいですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問