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で読み込めるのでしょうか。
どなたかよろしくお願いします。

回答No.6

Picosoft · ベストアンサー

うまく伝わっていないみたいですな。
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通信がしたいのかを区別できるからです。

お礼

ありがとうございました。
無事表示されました。

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

回答No.5

Picosoft

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

お礼

基礎がかけているとのこと、もっともでございます・・・。
なんとか補いながら実装したいのですが至らぬ点がありすぎて追いつかない現状です・・・。

javascriptはjsファイルに収めなければいけないので、
csファイルを二つにすることは難しそうです。
Ajax用というのはjsファイルではいけないのでしょうか。

回答No.4

Picosoft

Response.ContentTypeの設定の前にResponse.Clearメソッドを呼んでください。
　Response.Clear();
　//(ContentType設定・JSON出力)
　Response.Write();
　Response.End();
という流れでサーバ側は問題ないと思います。

HTML・JavaScript側にも問題があるような気もしますので、
サンプルと全く同じページを一度作ってみて学習することをおすすめします。

お礼

サンプルと同じページを作ったところ、正常に動きました。
ただ、サンプルと違うのは
aspx.csが二つではなく、
TestJson.aspx
TestJson.aspx.cs
test.js

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

回答No.3

Picosoft

> すみません、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ページがレスポンスとして送出されます)

お礼

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

補足

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

回答No.2

Picosoft

FirefoxのWebコンソール等でレスポンスの内容を確認してみてください。
JSON形式でレスポンスが返ってきていないと思います。

とりあえずaspx.csのJSON送信部分を載せていただけますか？

お礼

すみません、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ではないとエラーが発生しているのですが・・・。
すみません・・・。

回答No.1

Picosoft

詳しい部分は見ていませんが、AjaxリクエストのURLがおかしいです。

××.aspx.csは「××.aspxを表示するためのコード」が書かれているファイルですので、
クライアントが××.aspx.csにアクセスすることはありません。
(できてしまったらセキュリティ的によろしくない)

URLを××.aspx.csではなく××.aspxにして試してみてください。

ちなみに、Webアプリのデバッグには
FiddlerやIEの開発者ツール、FireFoxのWebコンソール等が役立ちますので、
これらの使用を推奨します。

お礼

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