FuelPHPとjQueryで非同期投稿機能を作りたいです

前提・実現したいこと

FuelPHPを使ってLineのように遷移せずに投稿するアプリを作りたいです。

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

console
1main.js?1639534087:18 Uncaught ReferenceError: $json is not defined
2    at Object.<anonymous> (main.js?1639534087:18)
3    at c (jquery.min.js:3)
4    at Object.fireWith [as resolveWith] (jquery.min.js:3)
5    at k (jquery.min.js:5)
6    at XMLHttpRequest.r (jquery.min.js:5)

該当のソースコード

PHP
1views/chat.php
2
3<h1>ajax受信</h1>
4<div id='return'></div>
5<?ph//p data->content ?>
6
7<h1>ajax送信</h1>
8<div id='return'></div>
9<textarea id='main' name='content'></textarea><br>
10<button id='send'>送信</button>

javascript
1main.js
2
3window.onload = (function(){
4  console.log('test');
5
6  $('#send').on('click', function(event){
7    $.ajax({
8      type: 'POST', //HTTPリクエストのタイプ
9      url: 'ajax/create',  // リクエストしたいURLを記載。送信先 chat.php?
10      dataType: 'json', //受け取るデータの形
11      data: {
12          //渡すデータをここに記述
13          content : $('#main').val()
14      },
15      }) //ここでcontrollerに移る
16      .done(function(data) {
17        //成功した時の処理
18        console.log('送信完了');
19        
20        console.log(data);
21
22        // $array = json_decode(data, true); 
23        //jsonを配列に変換 trueだと配列 falseだとオブジェクト
24
25        $('#return').append('<p>' + data + '</p>');
26      })
27      .fail(function(XMLHttpRequest, textStatus, errorThrown) {                                          
28          //失敗した時の処理
29          alert('読み込み失敗');
30          console.log("XMLHttpRequest : " + XMLHttpRequest.status);
31          console.log("textStatus : " + textStatus);
32          alert(errorThrown);
33      });        
34  })
35
36});

PHP
1controller/ajax.php
2
3<?php 
4class Controller_Ajax extends Controller_Rest{
5
6  public function post_create(){ //関数 HTTPメソッド_処理名
7    $content = $_POST['content']; //main.jsから送信されたデータ
8    $user_id = Arr::get(Auth::get_user_id(),1);
9    // Auth::get_user_id() : ログイン中のユーザーIDを取得。
10    // 注意点がありこのメソッドの戻り値はドライバ名とユーザーIDの配列。
11    $array = array("content" => $content, "user_id" => $user_id);
12    header("Content-type: application/json; charset=UTF-8");
13    // 指定しないと、text/html型で処理される
14    // JSONデータを処理することを指定
15    $json = json_encode($array); //jsonデータに変換
16    // $json.save();
17    return $this->response($json, 200);
18    // 応答データを送信
19    //HTTPステータスコード２００：リクエストが正常に処理できた。
20  }
21
22}

routes.php
1<?php
2return array(
3	'_root_'  => 'welcome/index',  // The default route
4	'_404_'   => 'welcome/404',    // The main 404 route
5
6	'login' => 'login/login', 
7	"signin" => "login/signin",
8	"logout" => "login/logout",
9	'registration' => 'login/registration',
10  "chat" => "chat/chat",
11	"ajax/create.json" => "ajax/create",
12	// "chat" => "ajax/chat",
13	// "ajax/post-rgist" => "ajax/post/regist",
14	
15	'hello(/:name)?' => array('welcome/hello', 'name' => 'hello'),
16);
17

試したこと

データが保存できていないのでajaxコントローラー内でsave()を使いましたがエラーになりました。
console.logでdataの中身を確認しましたが、user_idが0でした。contentもしっかり受け取れていない可能性があるかもしれないです。
veiwでjsonをデコードしようとしましたが失敗
オブジェクトのまましようとしましたが、undefind errorが出ました。

yambejp

2021/12/15 03:08 編集

基本的な動作がわからないのであればもっと簡素なところから始めてみればよいのでは？・apiを用意し、fetchで投げる仕組みとする・fetchで要求、apiが定数を返し、受け取ったものをconsole.logで確認・同、apiが受け取った値をjsonで返し、同・同、apiが作業後任意の値を返し、同・戻ってきたデータをjsで加工して利用みたいな流れ