javascriptでJSONを取得する方法

前へ 次へ
このQ&Aのポイント
  • C#、asp.netでJson形式の文字列をjavascriptに渡してgooglemapで使用したいです。
  • json.netやらDynamicJson やらがインストールされていないと使用できないのでしょうか。
  • 情報の読み込みに失敗しましたとアラートが出てしまいます。
回答を見る
  • ベストアンサー

javascriptでJSONを取得する方法

C#、asp.netでJson形式の文字列をjavascriptに渡してgooglemapで使用したいです。 json.netやらDynamicJson やらがインストールされていないと使用できないのでしょうか。 aspx.cs dynamic dataSet = 取得したlist; System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); serializer.Serialize(dataSet); javascript function json() { $.ajax({ url: ××.aspx.cs, type: "get", dataType: 'json', error: function () { alert("情報の読み込みに失敗しました"); }, success: function (data) { 　　　　　　　alert("data"); } }); } こちらでは、情報の読み込みに失敗しましたとアラートが出てしまいます。 http://qiita.com/rbtnn/items/b2ec6c7dee792e66ac75 http://aspnet.keicode.com/basic/jquery-ajax-basics.php この２つのサイトを参考にしています。 dataSetの中身に目的のリストが取得できているのは確認済みです。 何がいけないのでしょうか。 どうやったらJSONをjavascriptで読み込めるのでしょうか。 どなたかよろしくお願いします。

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

  • ベストアンサー
  • Picosoft
  • ベストアンサー率70% (274/391)
回答No.6

うまく伝わっていないみたいですな。 Output.aspxとTestJson.aspxの2つに分けてください、ということです。 (Javascriptをjsファイルに入れるのはそれで構いません) サンプルのページでは ・Output.aspx(ブラウザ表示用) ・TestJson.aspx(Ajax用) ・TestJson.aspx.cs(TestJson.aspxへのリクエストを受けた時に実行するコード) の3つのファイルが用意されています。 表示するページは1つだけなのに、Output.aspxとTestJson.aspxの2つがあるのはなぜかというと、 その方が ・ページ表示時はhttp://localhost/Output.aspx ・Ajax通信時はhttp://localhost/TestJson.aspx と、URLを見るだけでページ表示がしたいのか、Ajax通信がしたいのかを区別できるからです。

hizumin
質問者

お礼

ありがとうございました。 無事表示されました。 Jsonの出力用のファイルが別途ないといけないのですね。 とても助かりました。 １つでもできるという方法も気になりますが、基礎知識をつけてから実践してみようと思います。 本当にありがとうございます。

その他の回答 (5)

  • Picosoft
  • ベストアンサー率70% (274/391)
回答No.5

> ただ、サンプルと違うのは > aspx.csが二つではなく、 > TestJson.aspx > TestJson.aspx.cs > test.js > という３つのファイルの構成になっていることです。 基礎が欠けているようなので詳しい説明はしませんが、 サンプル同様、aspx.csを2つ(ページ表示用とAjax用)にするというファイル構成にしてください。 1つでも不可能ではありませんが、混乱の元になります。

hizumin
質問者

お礼

基礎がかけているとのこと、もっともでございます・・・。 なんとか補いながら実装したいのですが至らぬ点がありすぎて追いつかない現状です・・・。 javascriptはjsファイルに収めなければいけないので、 csファイルを二つにすることは難しそうです。 Ajax用というのはjsファイルではいけないのでしょうか。

  • Picosoft
  • ベストアンサー率70% (274/391)
回答No.4

Response.ContentTypeの設定の前にResponse.Clearメソッドを呼んでください。 　Response.Clear(); 　//(ContentType設定・JSON出力) 　Response.Write(); 　Response.End(); という流れでサーバ側は問題ないと思います。 HTML・JavaScript側にも問題があるような気もしますので、 サンプルと全く同じページを一度作ってみて学習することをおすすめします。

hizumin
質問者

お礼

サンプルと同じページを作ったところ、正常に動きました。 ただ、サンプルと違うのは aspx.csが二つではなく、 TestJson.aspx TestJson.aspx.cs test.js という３つのファイルの構成になっていることです。 スタートページはTestJson.aspxになっています。 Output.aspxはありません。 csでデータ作成後、jsファイルでjsonの値を取得して、画面で表示するような流れにしたいです。 javascriptではjson()を他のメソッドから呼んでいます。 なぜResponse.Write();を消さないとメソッドを通らず画面にjsonを全てを表示してしまうのでしょうか・・・。 大変困っています・・・。

  • Picosoft
  • ベストアンサー率70% (274/391)
回答No.3

> すみません、FireFoxが使用できる環境になく、IEのみでの検証でなんとかなりませんでしょうか・・・。 IE9以降であれば、開発者ツールから通信の内容を確認できます。 http://www.atmarkit.co.jp/ait/articles/1106/16/news129.html > 記載した通り、 > dynamic dataSet = 取得したlist; > System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); > serializer.Serialize(dataSet); > としか記述していません。 http://qiita.com/rbtnn/items/b2ec6c7dee792e66ac75 のコードにもあるように、 JSON化したデータをResponse.Writeで出力しないと意味がありません。 (Response.Writeを使わなかった場合、通常のHTMLページがレスポンスとして送出されます)

hizumin
質問者

お礼

>JSON化したデータをResponse.Writeで出力しないと意味がありません。 Response.Writeを追記したところ、画面に取得したListが全て表示されてしまいました。 デバッグではjsonを呼び出しているjavascriptを通過してくれませんでした。 どうしたらよいのでしょうか。

hizumin
質問者

補足

Response.End();をコメントアウトしたところ、目的のjavascriptに遷移してくれましたが、 やはり「情報の読み込みに失敗しました」のアラートが呼び出されてしまいます・・・。 しかも画面上部には取得したリストが表示されっぱなしです。 表示されているのに取得できないのはどういうことでしょうか・・・。 URLも間違っていません。

  • Picosoft
  • ベストアンサー率70% (274/391)
回答No.2

FirefoxのWebコンソール等でレスポンスの内容を確認してみてください。 JSON形式でレスポンスが返ってきていないと思います。 とりあえずaspx.csのJSON送信部分を載せていただけますか？

hizumin
質問者

お礼

すみません、FireFoxが使用できる環境になく、IEのみでの検証でなんとかなりませんでしょうか・・・。 IE上でデバッグをかけてみましたが、よくわかりませんでした。 >とりあえずaspx.csのJSON送信部分を載せていただけますか？ これはどういうことでしょうか。 記載した通り、 dynamic dataSet = 取得したlist; System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); serializer.Serialize(dataSet); としか記述していません。 やはり送信するには何か記述が必要なんですよね？ いろんなサイトを見たのですが、そのような記述が見つからず困っています・・・。 hiddenとかにdataSetを渡せばよいのでしょうか？ stringではないとエラーが発生しているのですが・・・。 すみません・・・。

  • Picosoft
  • ベストアンサー率70% (274/391)
回答No.1

詳しい部分は見ていませんが、AjaxリクエストのURLがおかしいです。 ××.aspx.csは「××.aspxを表示するためのコード」が書かれているファイルですので、 クライアントが××.aspx.csにアクセスすることはありません。 (できてしまったらセキュリティ的によろしくない) URLを××.aspx.csではなく××.aspxにして試してみてください。 ちなみに、Webアプリのデバッグには FiddlerやIEの開発者ツール、FireFoxのWebコンソール等が役立ちますので、 これらの使用を推奨します。

hizumin
質問者

お礼

××.aspxと記述しましたが、やはり取得できません。 そもそも、aspx.csの記述がそれだけでaspxに渡るのでしょうか・・・？ 渡っていないから表示されていないのでしょうが、書き方がわかりません・・・。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 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
  • Ajaxのエンコードで

    私はshift_JISで作成したCGIのページがあるのですが、 Ajaxを導入しようとしたときに、Ajaxというか Javascriptでは、utf-8しか認識しないととあるサイトに書いてあったのですが、 そのCGIのページをphpに変更するにはものすごく多大な時間が 必要になってしまうんですが、CGIをutf-8仕様にするのも大変です AjaxでShift_JISに変換するような事はできませんでしょうか？ http://javascriptist.net/ref_prototype/ajax.periodicalupdater.html のサイトに乗っている <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> var myajax; function execute() { myajax = new Ajax.PeriodicalUpdater( "container", "./member.cgi", { "method": "get", "parameters": "id=$id", frequency: 5, // 5秒ごとに実行 onSuccess: function(request) { // 成功時の処理を記述 // alert('成功しました'); // jsonの値を処理する場合↓↓ // var json; // eval("json="+request.responseText); // ↓IEでもキャッシュを読み込まずに毎回リモート接続を実行するためのコード(パラメータの書き換え) var str = myajax.options.parameters; var hash = str.parseQuery(); hash["ajax_request_id"] = Math.random(); hash = $H(hash); myajax.options.parameters = hash.toQueryString(); }, onComplete: function(request) { // 完了時の処理を記述 // alert('読み込みが完了しました'); // jsonの値を処理する場合↓↓ // var json; // eval("json="+request.responseText); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } ); } </script> を使用して自動更新をしようと思っているのですが

  • aspx.csからJSON形式にする方法

    こちらのサイト http://qiita.com/rbtnn/items/b2ec6c7dee792e66ac75 を参考に、DBで取得した値をJSON形式にしてjavascriptに渡したいです。 サイトのdynamic datasetにべた書きではなく、DBで取得したDatasetのデータを入れたところ、 型 'System.Globalization.CultureInfo' のオブジェクトのシリアル化を実行中に循環参照が見つかりました。 とエラーが発生してしまいました。 これはどうしたら解消できるのでしょうか。 最終的な目的は、GoogleMapのスクリプトに緯度経度や情報ウィンドウに表示させる値を渡して表示させたいと考えています。 JSON形式でaspx.csで作成した文字列をjsファイルに渡すのが一番よいという結論にいたったのですが、 他によい方法があればご指摘お願いします。

  • $.getJSONにJSON.stringifyを

    $.getJSONに、JSON.stringifyした結果を指定したいのですが、どうすればよいでしょうか？ ■現状 ・コンソールにJSONは出力されているのですが、$.getJSONでこのファイルを指定しても、画面真っ白です ▼index.html <script type="text/javascript" src="hoge.json"></script> <script type="text/javascript"> $.getJSON('hoge.json', function(data) { ▼hoge.json var obj =([ [略], ]); var json_text = JSON.stringify(obj); // テスト出力 console.log(json_text); ■質問 ・$.getJSONにこの出力結果(json_text)を指定するためには、どうすれば良いでしょうか？ ・一旦ファイル出力しなければいけないのでしょうか？ ・どうやるのでしょうか？ ・AJAXでサーバ側へデータを渡してファイル出力した後、$.getJSONでその出力したファイルを指定するしかない？

  • 別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>

  • Javascriptで教えてください

    下記１だと実行できるのですが、２だと実行できないのはなぜでしょうか １ <script type="text/javascript"> function OnButtonClick() { alert('クリック'); } $(function () { }) </script> ２ <script type="text/javascript"> $(function () { function OnButtonClick() { alert('クリック'); } }) </script>

  • JSON変換データをjavascriptへ渡したい

    json_encode()関数で、JSON形式の文字列に変換した配列データをjavascriptへ渡したいのですが、 いつのまにか、ただんの文字列になってしまいます。なんででしょうか？ ■コード $jsondata= json_encode($originalarray) <script type="text/javascript"> var result = <?php echo($jsondata) ?>; alert(result); </script> ■変数 ・$originalarray Array ( [0] => ./im/1a.j [1] => ./im/2.j [2] => ./im/9_1.j ) ・jsondata [".\/im\/1a.j",".\/im\/2.j",".\/im\/9_1.jp"] ・result ./im/1a.j./im/2.j./im/9_1.jp

    • ベストアンサー
    • PHP
  • jQueryで配列JSONの読み込み方法

    phpからの返り値data（json形式）を表示したいのですがうまくいきません。 コンソール上でjsonを取得できているようなのですが、値を表示しようとするとundifinedと表示されてしまいます。 どのように書き換えれば動作するようになるのでしょうか？ よろしくおねがいします！ -------------------------------------------------------- ■ receive.js　■ -------------------------------------------------------- $.ajax({ type: "POST", url: "receive.php", data: { "id": 3 }, success: function(data){ console.log(data); alert(data.time); //ここで「undifined」のエラーが出ます！！ $("#go").after(data.id); //ここは何も表示されません。 $("#str").html('準備完了'); }, error: function(data){ $("#str").html('準備未完了'); }, }); -------------------------------------------------------- ■　receive.php　■ -------------------------------------------------------- <?php require 'dbconnect.php';//dbconnectを呼び出し $data = array(); $id = $_POST['id']; $sql = " SELECT * FROM sample_table WHERE id = " . $id; $result = mysqli_query($connect,$sql) or die("クエリの送信に失敗しました。<br />SQL:".$sql); while ($row = mysqli_fetch_array($result)) { $data[] = $row; } mysqli_close($connect) or die("MySQL切断に失敗しました。"); // MySQLへの接続を閉じる header('Content-Type: application/json; charset=utf-8'); echo json_encode($data); ?> -------------------------------------------------------- ■　index.html　■ -------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <title>PHP * jQuery * ajax * MySQL</title> <script type="text/javascript" src="receive.js"></script> <script type="text/javascript" src="post.js"></script> </head> <body> <div class="ltd-form"> <form id="inquiry-form" method="get"> <fieldset> ・ ・ ・ </fieldset> <div id="go"></div> </form> </div> <div id="str"></div> </body> </html> -------------------------------------------------------- ■　実行後のChromeのコンソール　■ -------------------------------------------------------- 0: Object 0: "3" 1: "1423789247" 2: "96" 3: "963" data1: "96" data2: "963" id: "3" time: "1423789247" --------------------------------------

  • jqueryを使いajaxで取得したデータをコールバック関数外で取得する方法

    下記のようなスクリプトでjQueryを使い、ajaxでtextを取得します。 コールバック関数内では、もちろんtextが使えるのですが、コールバック関数外からはtextに一切アクセスできなくなります。 このようにグローバルからajaxで取得したデータは取得できないのでしょうか？ prototype.jsでも同じ結果です。 グローバルからの取得法、ご存知の方いらっしゃいましたらご教示頂ければと思います。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"><!-- $(document).ready(function (){ $.get("./sample.txt",function(text){ alert(text); // textが取得できる }); }); alert(text); // textが取得できない // --></script>

  • GoogleMpsAPIのjson.jsによる読み込み

    GoogleMapsAPIの勉強をしています、プログラミング初心者です。 「GoogleMapsAPI徹底活用ガイド」という解説本を参考にしています。 中心位置情報をJSON形式で別ファイルに記述したものをjavascriptプログラムで読み込み、実行、googlemapに反映させたいのですが、うまくいきません。 JSON in JavaScript のページ（http://www.json.org/js.html）のリンクからJSON処理ライブラリjson.jsのスクリプトをコピー、私のサーバー内に保存し、 <head></head>内で <script type="text/javascript" src="json.js" charset="utf-8"></script> とsrc属性にjson.jsを指定、 javascriptのfunciton {}内で、 GDownloadUrl( "center.json", mySetCenter ); function mySetCenter(data) { var obj = data.parseJSON(); map.setCenter( new GLatLng(obj.lat, obj.lng), obj.zoom ); } としています。 center.jsonというのが、JSON形式の位置情報ファイルです。 解説本のサンプルを使用しているので、スクリプトの間違いではないと思います。 json.jsを使わず、javascriptでeval関数を使う場合は、正常にJSON形式の中心位置情報のデータが読み込まれ、地図が表示されます。 おそらく、json.jsのダウンロード方法やサーバへの配置方法などが間違っているではないかと思いますが、参考になる資料がなく困っています。 どなたかご教授お願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する