jsonファイル（data.json）の内容をコンソールログでみれるようにしたいです

Question

1.前提・実現したいこと
前提：laravelとjQueryを利用しており、通信はajaxでしている

実現したいこと：jsonファイル（data.json）の内容をコンソールログでみれるようにすること

2.発生している問題・エラーメッセージ
エラーメッセージの類は一切出ておらず、また下記のコードを見てもらえばわかるが、「window.alert('読み込みエラー')」が表示されていないにもかかわらずコンソールログで表示されない。何故なのか原因が分からずに困っています

3.該当のソースコード
<study.js>

$("a").click(function () {
  
  $.getJSON("data.json",function(json){
    
  
  
  $.ajaxSetup({
  headers: {
    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
  },
});

  $.ajax({
    //POST通信
    type: "POST",
    //ここでデータの送信先URLを指定します。
    url: '/json',
    data: JSON.stringify(json),
    dataType: 'json',
    
    

  })
  
    //通信が成功したとき
    .done(function(data){
      console.log('data');
    })
    .fail(function(){
      window.alert('読み込みエラー')
    });
    
  });
});

Comments

[退会済みユーザー]

「実現したいこと：jsonファイル（data.json）の内容をコンソールログでみれるようにすること」以前の問題として console.log('a'); が実行されないと言ってますか？　ブラウザのデバッガを使ってそれに制御が飛んできているかどうか、Fiddler などのキャプチャツールを使って要求・応答がどうなっているかなど調べましたか？

[ku__ra__ge]

ソースコードが何をやろうといているのか、ちょっとわかりません。
取ってきたjson内容をコンソールログでみるだけなら、以下のようなコードだけで出来ると思いますが。
$.getJSON("https://www.jma.go.jp/bosai/common/const/area.json",function(json){
console.log(json);
});

[退会済みユーザー]

> console.log('a');ー＞ console.log('data');に誤字修正

それに何の意味があるのでしょう？　何も分かってないとしか思えないのですけど。

[退会済みユーザー]

前にもコメントしましたが、ブラウザのデバッガを使ってそれに制御が飛んできているかどうか、Fiddler などのキャプチャツールを使って要求・応答がどうなっているかなど調べましたか？　質問するならその前に自分でやるべきことをやってからにしましょう。もし、そう言われても何をしたらいいのか分からなくて身動き取れないならその旨書いてください。

[haruatu]

実はコンソールログで見ること自体が目的ではなく、javascriptの勉強でajax通信を利用して外部ファイルを読み込みたいのですが、それが出来ているか確認するためにコンソールログで見たいというだけなんです。

[haruatu]

デバッガのどこをどう見たら制御が飛んできているかどうか判断できるのでしょうか？

[退会済みユーザー]

> 実はコンソールログで見ること自体が目的ではなく、javascriptの勉強でajax通信を利用して外部ファイルを読み込みたいのですが、それが出来ているか確認するためにコンソールログで見たいというだけなんです。

そうだとしても、

> console.log('a');ー＞ console.log('data');に誤字修正

がその目的にも意味がないということが分かる程度の知識が無いと話が通じないと思うのですけど。

また、それ以前に応答が返ってきてないとダメなわけで、だから Fiddler 等のキャプチャツールで見てくださいと言っているわけですが、そのあたりは分かってますか？

[退会済みユーザー]

> デバッガのどこをどう見たら制御が飛んできているかどうか判断できるのでしょうか？

ブレークポイントを設定してそこで止まるか否かで分かるはずです。

[退会済みユーザー]

質問者さん、その後無言ですが、回答したのでそれに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？ 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。とにかく無言は NG です。

Answer 1

質問のコメント欄の 2022/06/11 12:56 の質問者さんのコメントで、

実はコンソールログで見ること自体が目的ではなく、javascriptの勉強でajax通信を利用して外部ファイルを読み込みたいのですが、それが出来ているか確認するためにコンソールログで見たいというだけなんです。

とのことですので、それをブラウザのデバッガを使って確認する方法、Fiddler などのキャプチャツールを使って要求・応答がどうなっているかなど調べる方法を書いておきます。

{"Id":6,"Name":"Batman"} という JSON 文字列を送信すると、以下のような JSON 文字列を返す Web API を例に取ります。

[
  {"id":1,"name":"スーパーマン"},
  {"id":2,"name":"バットマン"},
  {"id":3,"name":"ウェブマトリクスマン"},
  {"id":4,"name":"チャッカマン"},
  {"id":5,"name":"スライムマン"},
  {"id":6,"name":"Batman"}
]

Web API の URL が /values とすると、それに要求を出して応答を取得する jQuery Ajax のコードは以下のようになります。

function apiHeroesPost() {
    var j = { Id: 6, Name: "Batman" };
    var jsonString = JSON.stringify(j);
    $.ajax({
        type: "POST",
        url: "/values",
        data: jsonString,
        contentType: "application/json; charset=utf-8"
    })
        .done( function (data) {
            $('#heroes').empty();
            $.each(data, function (key, val) {
                var str = val.id + ': ' + val.name;
                $('<li/>', { html: str }).appendTo($('#heroes'));
            });
        })
        .fail( function (jqXHR, textStatus, errorThrown) {
            $('#heroes').empty();
            $('#heroes').text('textStatus: ' + textStatus +
                ', errorThrown: ' + errorThrown);
        })
}

スクリプトには文法エラーなどはなく有効であることが前提ですが、

(1) ブラウザのデバッガを使う

上のコードのあるページを実行してブラウザに表示したら、ブラウザのディベロッパーツールを開いて Source タブをクリックします。下の画像は Chrome の例です。

スクリプトを表示して適切な行にブレークポイントを設定してスクリプトを実行するとその行で止まるので、そこに制御が飛んできたのが分かります。data の内容も分かります。

(2) Fiddler を使う

Fiddler を起動して上の jQuery Ajax のコードを実行し、応答・要求をキャプチャしたのが以下の画像です。期待通り要求が出て、期待通り応答が返ってきているのが分かります。

Fiddler が使えなければディベロッパーツールでも応答・要求をキャプチャできます。