Laravel + jQuery로 Ajax 통신 시도

자신 속에서 어쩔 수 없이 어색함을 느꼈던 jQuery입니다만, 컨트롤러와 JS간의 값의 전달에 대해 나름대로 정리해 보았습니다.

Ajax의 기본 작성 방법

$(function(){
  $.ajax({
    type: "get", //HTTP通信の種類
    url:'/home', //通信したいURL
    dataType: 'json'
  })
  //通信が成功したとき
  .done((res)=>{
    console.log(res.message)
  })
  //通信が失敗したとき
  .fail((error)=>{
    console.log(error.statusText)
  })
});

$(function) 그리고 화면이 로드된 타이밍에 발화시킬 수 있다(vue에서 말하는 mounted적인 녀석??)

함수를 작성하는 방법

$('セレクタ').イベント名(function(){
  //イベント発生時に実行したい処理
});

【GET 메소드】 DB의 값을 취득해 HTML에 표시한다

//ボタンを押したタイミングで発火する
$("#bt").click(function () {
  $.ajax({
    type: "get", //HTTP通信の種類
    url: "/getuser",
    dataType: "json",
  })
    //通信が成功したとき
    .done((res) => { // resの部分にコントローラーから返ってきた値 $users が入る
      $.each(res, function (index, value) {
        html = `
                      <tr class="user-list">
                          <td class="col-xs-2">ユーザー名：${value.name}</td>
                      </tr>
         `;
      $(".user-table").append(html); //できあがったテンプレートを user-tableクラスの中に追加
      });
    })
    //通信が失敗したとき
    .fail((error) => {
      console.log(error.statusText);
    });
});

$("#요소명")에서 id를 지정할 수 있다.

$(".요소명")에서 class를 지정할 수 있다.

서버측의 처리로, users 테이블의 값을 모두 취해 와, $users에 대입해 json로서 돌려준다.

   public function getUser()
  {
    $users = User::select('name','email')->get();
    return $users;
  }

【POST 방법】

$("#bt2").click(function () {
  $.ajaxSetup({
  headers: {
    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
  },
});
  $.ajax({
    //POST通信
    type: "post",
    //ここでデータの送信先URLを指定します。
    url: "/postgmail",
    dataType: "json",
    data: {
      uid: 100,
      subject: "テストタイトル",
      from: "テストfrom",
      body: "テストbody",
    },

  })
    //通信が成功したとき
    .then((res) => {
      console.log(res);
    })
    //通信が失敗したとき
    .fail((error) => {
      console.log(error.statusText);
    });
});

// コントローラー側
 public function postGmail(Request $request)
  {
    $result = $request->all();
    return $result;
  }

// ルーティング
Route::post('/postgmail', 'HomeController@postGmail');

console.log(res)에서 값을 확인할 수 있었습니다.

Ajax에서 POST한 값을 DB에 저장

Ajax에서 POST한 값을 DB에 저장합니다.
위의 Ajax 설명은 그대로 유지하고 컨트롤러 측을 편집합니다.

// 一番上の useの部分に追記
use App\Gmail;
=== 省略 ===
  public function postGmail(Request $request)
  {
    $gmail = new Gmail();
    $gmail->uid = $request->uid;
    $gmail->subject = $request->subject;
    $gmail->from = $request->from;
    $gmail->body = $request->body;

    $gmail->save();
  }

값이 저장되었습니다.