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

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

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

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

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

1回答

622閲覧

ajaxでJSONと通信できない

Nishin

総合スコア30

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

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クリップ

投稿2020/11/08 08:12

編集2022/01/12 10:55

現在私は、kindleで購入したJQueryのテキストをもとに、ajaxを基礎部分から勉強しようとしております。
簡単なサンプルコードを打ち込んで作成し、ローカル環境(サーバー接続なし)で、htmlファイルのボタンをクリックするとJSONが読み込まれ、コンソールにデータが出力されるようにしようとしています。
コードは次の2つです。

html

1ajax.html 2 3<!DOCTYPE html> 4<html lang="ja"> 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>ajaxSumple</title> 9 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 10 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 11 <link href="https://fonts.googleapis.com/css?family=Sawarabi+Gothic" rel="stylesheet"> 12</head> 13<body> 14 <form action=""> 15 <input type="button" id="sampleGet" value="ajaxで取得"> 16 </form> 17 18<script> 19 $("#sampleGet").on('click', function(){ 20 $.ajax({ 21 url: 'sampleGet.json', 22 type: 'GET', 23 dataType: 'json', 24 success: function(data){ 25 console.log("ようこそ、"+data.sei+" "+data.sei+"さん"); 26 } 27 }); 28 }); 29</script> 30<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 31</body> 32</html> 33

JSON

1sampleGet.json 2 3{"sei" : "Yamada", "mei" : "Tarou"}

しかし、Chromeを立ち上げてボタンを押しても、コンソール画面には次のようなエラーが出るばかりで、ajaxが読み込まれないままになっています。

Uncaught ReferenceError: $ is not defined at ajax.html:17 $("#sampleGet").on('click', function(){

(尚、この2つのファイルは、どちらもデスクトップ画面上に保存しており、ディレクトリを作成してその中に保管しているという訳ではありません)

この場合、JSONのデータを正常に読み込む為には、どの部分をどう修正しなければならないでしょうか。

今回も初歩的な事項についてお聞きする事と存じますが、お手数ですがご回答をお願いします。

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

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

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

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

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

guest

回答1

0

コードは上から順に読み込まれるので、以下のようにjqueryの読み込みを先に書いてみてください。

diff

1+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 2<script> 3 $("#sampleGet").on('click', function(){ 4 $.ajax({ 5 url: 'sampleGet.json', 6 type: 'GET', 7 dataType: 'json', 8 success: function(data){ 9 console.log("ようこそ、"+data.sei+" "+data.sei+"さん"); 10 } 11 }); 12 }); 13</script> 14-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

また、もし、ローカルサーバーを立ち上げずに、ブラウザでファイルを開いているだけの場合、
CORSに関するエラーが発生するかと思います。(CORSに関しては興味があれば調べてみてください。)

その場合、ローカルサーバーの立ち上げ方から調べてみてください。

投稿2020/11/08 08:28

編集2020/11/08 11:24
hayato7

総合スコア1135

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

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

Nishin

2020/11/08 13:49

ご回答ありがとうございます。 JQueryを読み込む位置に関しては盲点でした。 そちらを直して、IDEのpaizacloudで試してみたのですが、結局のところ、コンソールにエラーが表示されるばかりで通信は失敗のままでした。 そこでもCORSに関するエラーというのが発生しているのかもしれませんね。 こちらで調べなおしてから、また別の基礎的教材が見つかればそちらでも試してみようかとも思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問