Laravel：Ajaxを使って画面の一部を動かす

Question

前提

10問の問題のテストが多数存在するアプリです。

Ajaxは超初心者です。
Larevelは理解していると思います。

実現したいこと

例えば、テスト番号20番のテストの、第一問の解答だけを見たいときに、クリックしたら、そこに解答を表示する様にしたいです。

発生している問題・エラーメッセージ

クリックするとNULLになります。

localhost/ja1/{id}にアクセスすると["\u6708\u66dc\u65e5"]のような表示ですが、デバッグすると解答がキチンと表示されます。

コントローラからjsonへのデータの渡し方を理解していません。色々調べたのですが、見つけることが出来ませんでした。

どなたかご教授いただけたらと思います。よろしくお願いいたします。

該当のソースコード

Route::get('ja1/{id}',[App\Http\Controllers\StudyController::class,'one'])->name('one');

class StudyController extends Controller

 public function one( $id)
    {
        $word = Word::where('id', $id)->value('ja1');
        return response()->json([
            $word
        ]);
    }

view
     <script>
              $(function(){
                    $('#button1').click(
                    function(){
                       $.ajax({
                          type:'GET',
                          url:'ja1/[$id]',
                          dataType: 'text', //json形式で受け取る
                       }).done(function(results) {
                           $('#text1').html(results);
                       }).fail(function(err) {
                           alert('ファイルの取得に失敗しました。');
                         });
                       }
                     );
                    });
     </script>

試したこと

以上のコードはこちらのサイトを参考に作りました。
https://laraweb.net/surrounding/4217/
https://harumakiii.com/archives/430

うまくいかなかったので、以下のサイトでやってみましたが、こちらでは500エラーになったので、上記のサイトのみで作りました。
https://makitweb.com/fetch-records-from-mysql-with-jquery-ajax-laravel/#route

補足情報（FW/ツールのバージョンなど）

Laravel8

Answer 1

500エラーということはサーバーサイドの問題でしょう
ajaxではなく直接urlで開いたときに戻り値が想定通りかである程度判断はつくと思います

参考

以下test.jsonというテキストファイルを作って非同期で呼んでみてください
//test.json

["\u6708\u66dc\u65e5"]

html

window.addEventListener('DOMContentLoaded', ()=>{
  fetch('test.json').then(x=>x.json()).then(console.log);
});

上記で問題なければ、直接アクセスと、XHRでのアクセスのサーバー反応の違いだと思います

Comments

[hntake]

回答ありがとうございます。
試したことの内容が分かりにくくて申し訳ありません。（修正してみました）

つまり、直接urlで開いたときに戻り値が["\u6708\u66dc\u65e5"]になっているのが問題なのでしょうか？
ダブルクオーテーションを外しコード表記にならないようにする方法を調べてみようと思います。

[yambejp]

> ["\u6708\u66dc\u65e5"]になっているのが問題なのでしょうか？

直接開いて500エラーがおきずエンティティ状態でもどってくるのであれば、サーバーがでxhrでの要求を拒否している可能性はありませんか？
ご提示の処理はJSONで「["月曜日"]」を受け取っているので、JSONデータとしては問題ありません

[hntake]

回答ありがとうございます。
やってみます。

Answer 2

url:'ja1/[$id]',

ここはJavaScriptの世界なのでPHPの$idはただの文字列。

url: 'ja1/{{ $id }}',

{{ }}でこの中だけPHPの世界にする。

これが使えるのはbladeに直接JSを書いてる場合のみ。
JSファイルに書いたら{{ }}は当然動かない。
また質問することになるだけなのでそもそもbladeにJSを書く使い方が間違い。
「初心者が書いてる変なブログ」はさっさと卒業して正しいLaravelの使い方を覚えた方がいい。
jQueryなんてもはや一切出てこない。
やりたいことが質問に書いてるような程度の用途ならjQueryよりLivewire使う方が遥かにマシ。
「VueやReact＞Livewire＞＞＞＞＞＞＞＞＞フロントから入門してる最近の初心者の技術レベル＞＞＞＞＞bladeに直接書いてるjQuery」くらいの差がある。

Comments

[hntake]

回答ありがとうございます。laravelは分かってきているつもりでした。やっぱり、まだまだ知らないことがあるんですね。JSも別ファイルですね。勉強になります。ありがとうございます。

お陰様で、文字化けの状態ですが、表示されるようになりました。ありがとうございます。