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-basi …
この２つのサイトを参考にしています。

dataSetの中身に目的のリストが取得できているのは確認済みです。

何がいけないのでしょうか。
どうやったらJSONをjavascriptで読み込めるのでしょうか。
どなたかよろしくお願いします。

No.6 ベストアンサー 回答者： Picosoft 回答日時： 2013/12/04 09:18

うまく伝わっていないみたいですな。

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

お礼日時：2013/12/05 13:54

No.5 回答者： Picosoft 回答日時： 2013/12/03 16:03

> ただ、サンプルと違うのは

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

この回答へのお礼

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

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

お礼日時：2013/12/03 16:52

No.4 回答者： Picosoft 回答日時： 2013/12/03 15:05

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を全てを表示してしまうのでしょうか・・・。
大変困っています・・・。

お礼日時：2013/12/03 15:20

No.3 回答者： Picosoft 回答日時： 2013/12/03 13:36

> すみません、FireFoxが使用できる環境になく、IEのみでの検証でなんとかなりませんでしょうか・・・。

IE9以降であれば、開発者ツールから通信の内容を確認できます。
http://www.atmarkit.co.jp/ait/articles/1106/16/n …


> 記載した通り、
> 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ページがレスポンスとして送出されます)

この回答への補足

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

補足日時：2013/12/03 14:48

この回答へのお礼

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

お礼日時：2013/12/03 14:39

No.2 回答者： Picosoft 回答日時： 2013/12/03 12:10

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

お礼日時：2013/12/03 13:25

No.1 回答者： Picosoft 回答日時： 2013/12/03 09:22

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

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

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


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

この回答へのお礼

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

お礼日時：2013/12/03 11:31