laravel5・ajax・jqueryのPOSTをmysqlに格納するサンプル

laravel5・ajaxでmysqlのテーブルにデータを登録してみます。

CONTENTS

1 仕様
- 1.1 テーブル
2 サンプルコード

仕様

二つのテキストボックスにそれぞれ名前とパスワードを入力した後に送信ボタンを押す
画面が更新されることなく入力したデータがmysqlのuserTBLに登録される
データの登録をお知らせするアラートが出て終了

テーブル

mysql> show columns from userTBL;
+-------+--------------+------+-----+---------+----------------+
| Field | Type         | Null | Key | Default | Extra          |
+-------+--------------+------+-----+---------+----------------+
| ID    | int(11)      | NO   | PRI | NULL    | auto_increment |
| NAME  | varchar(50)  | YES  |     | NULL    |                |
| PW    | varchar(100) | YES  |     | NULL    |                |
+-------+--------------+------+-----+---------+----------------+

IDは自動採番。テーブル名はuserTBL。

サンプルコード

ルートディレクトリ以下にhogeというプロジェクトを立ち上げています。

以下、ルートディレクトリ/hoge//public/dataadd/にアクセスすると登録画面が表示されるという設定です。

ファイル一覧

route.php
dataadd.php：登録画面表示用
add.js：ajax制御用
dataaddcon.php：データ登録用

それとjquery。

route.php

Route::get('dataadd', function()
{
  return view('dataadd'); //登録画面表示
});

Route::any('add','dataaddcon@add'); //データ登録

登録画面のdataadd.php読み込みと
ajaxがaddにPOSTした際にデータ登録のdataaddcon.phpが発動。

dataadd.php（/resoueces/views/）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script> //jquery 
<script type="text/javascript" src="js/add.js"></script> //ajax制御用
</head>

<body>
  名前を入力してください。
  <br><br>
  <input type="text" id="name" name="name"> //名前入力欄
  <br><br>
  パスワードを入力してください。
  <br><br>
  <input type="password" id="password" name="password"> //パスワード入力欄
  <br><br>
  <input type="submit" id="submit" name="submit" value="送信"> //送信ボタン
</body>
</html>

add.js（/public/js/）

$(function()
{
  $('#submit').click(function() //送信ボタンをクリック
  {
    if($('#name').val()==''||$('#password').val()=='') //名前欄かパスワード欄どちらかが空欄だったら
    {
      alert('名前かパスワードが入力されていません！'); //アラート
    }
    else //空欄がない
    {
      $.ajax(
        {
          type: "POST", //POSTで渡す
          url: "add", //POST先
          data:
          {
            "name":$('#name').val(), //名前
            "password":$('#password').val() //パスワード
          },
          success: function(hoge) //通信成功、dataaddcon.phpからの返り値を受け取る
          {
            if(hoge==0) //返り値が0→成功
            {
              alert('正常終了しました');
            }
            else if(hoge==1) //返り値が1→失敗
　　　　　　　 {
              alert('失敗しました');
            }
          },
          error: function(XMLHttpRequest,textStatus,errorThrown) //通信失敗
          {           
            alert('処理できませんでした');
          }
        });
        return false; //ページが更新されるのを防ぐ
      }
    });
});

データをPOSTで渡してから、戻ってきた文字列によってデータ登録の成否をお知らせ。

dataaddcon.php（/app/Http/Controller/）

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use Response; //Response::makeのため
use Input; //Input::getのため
use DB; //DB操作のため

class dataaddcon extends Controller
{
    public function add()
    {
      $name=Input::get('name'); //名前
      $password=Input::get('password'); //パスワード

      $name=htmlspecialchars($name); //フォーム欄のコード埋め込みを防ぐ
      $password=htmlspecialchars($password);

      try //実行
      {
        DB::insert('insert into userTBL (NAME,PW) values (?,?)',[$name,md5($password)]); //データ登録
        return Response::make('0'); //データ登録成功
      }
      catch(Exception $e) //例外
      {
        return Response::make('1'); //データ登録失敗
      }
    }
}

add.jsからの文字列の受け渡しのために、Input::get()とResponse::make()を使います。
文字列の受け渡しとデータベース操作のために