ajaxでJSONと通信できない

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

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(){

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

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

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

行動規範の内容に同意します

回答1件

コードは上から順に読み込まれるので、以下のように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に関するエラーというのが発生しているのかもしれませんね。こちらで調べなおしてから、また別の基礎的教材が見つかればそちらでも試してみようかとも思います。

行動規範の内容に同意します