Ajax通信を実装する基本的な方法【FuelPHP+jQuery】

2024年3月16日

今回はFuelPHPに、jQueryを使用してAjax通信を実装する方法を解説します。

1回実装してしまうと、その便利さに、いろんな画面に使いたくなるAjax通信。
例えばDBのデータを取得する際に、PHPだけではページの更新を行わないといけませんが、Ajaxを活用するとページを更新することなくDBのデータを取得できます。

今回は、Ajaxを使って文言を呼び出すだけの簡単なプログラムを紹介します。

さまざまな方法に活用できると思いますので、ぜひ参考にしてみてください。

ルーティングファイルに追記

	'ajaxtest' => 'ajaxtest/index',  // Ajax通信のテストページ

今回は適当に「ajaxtest」でアクセスされた場合として追記しました。

コントローラーファイルの用意

まずはコントローラーファイルを用意します。

class Controller_Ajaxtest extends Controller
{

    /**
     * index:ビューファイルを表示する処理だけ
     */
	public function action_index()
	{
		return Response::forge(View::forge('ajaxtest'));
	}

    /**
     * Ajax:text_checkで呼び出されたら、テキストを送る
     * ここで、DBに接続して諸々プログラムを動かすこともできますが、
     * 今回はテキストボックスに入力された値を受け取って、返すだけにします
     */
    public function action_text_check()
    {
        $data = Input::post();   // これでJQueryからのデータを受け取る
        $Text = $data["Text"];
        $res['message'] = 'テキストボックスに「'.$data["Text"].'」と入力されました。';
        $json = json_encode($res);   // JQueryでデータを処理する用に、json_encodeを行う
        return $json;
    }
}

ビューファイルの用意

次に表示するビューファイルを用意します。

JSファイルの作成は今回省略して、Ajax通信を行うjQueryの記述をベタに書いちゃいます。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ajaxのテスト</title>
	<?php echo Asset::css('bootstrap.css'); ?>
	<?php echo Asset::js('jquery-3.7.1.min.js'); ?>
</head>
<body>
	<header>
    <form>
      <div class="form-group">
        <label>テキストボックス</label>
        <textarea class="form-control" id="Textbox" name="Textbox"></textarea>
      </div>
      <button type="button" class="btn btn-primary lord" >送信</button>
    </form>
	</div>
</body>
<script>
$(function () {
  $(document).on("click", '.lord', function () {
    // 時間がかかる処理の場合は、ここでロード中のモーダルウィンドウを出すのがおすすめ
    var Textbox = $('#Textbox').val();  // テキストボックスの入力値を取得
    if (Textbox == "") {
      alert('テキストボックスが空白です。テキストボックスを入力してください。');
      return false;
    }
    // Ajax通信の開始
    $.ajax(
      {
        url: 'ajaxtest/text_check',   // php側の「ファイル名/関数名」を記述
        type: 'post',
        data: {
          'Text': Textbox,   // php側に渡したいデータを記述
        },
        dataType: 'json',
      }
    )
      // Ajax通信に成功時の処理
      .done(function (data) {
          window.alert(data.message); // 取得したデータをアラート表示
          return false;
      })
      // Ajax通信に失敗時の処理
      .fail(function () {
        window.alert('正しい結果を得られませんでした。');
      });
    return false;
  })
})
</script>
</html>