シェアする

  • このエントリーをはてなブックマークに追加

PHPとjQueryの組み合わせでajaxなPOSTをMySQLに格納してみた

terminalアイキャッチ画像

こんにちは かねしろ@pinkrootです。

昨日は久しぶりにPHPでのコーディングを行いました。

取り組んだのはPHPとjQueryを組み合わせて、あるボタンが押されたときにajaxなPOSTを飛ばして、その飛んでいったパラメータをMySQLに格納する、という文字での説明が難しい処理です(笑) イメージとしては、ボタンを押しても画面がリロード(更新)されず、処理の裏側でDBへのデータ格納を行なっている、という感じ。

備忘録的にやり方をまとめます。

HowTo

自分で作成するファイルは以下の3つ。

  • ユーザが閲覧してボタンを押す画面(index.html)
  • ボタンが押されたら呼び出されるjavascriptファイル(post.js)
  • バックボーンで動作し、MySQLでデータを格納するPHPファイル(post.php)

 

上記ファイルの他に、ajaxを使うためにjQueryのファイルが必要となります。
ここから1.7.2のMinifiedをダウンロードして使いました。
ダウンロードしてきたjquery-1.7.2.min.jsと自作のpost.jsはjsディレクトリを作成し、その中にまとめて置きました。

.ProjectDirectory  
 index.html   
 post.php   
 .js
     jquery-1.7.2.min.js
     post.js

というようなディレクトリ構成。

index.html

index.htmlのコードは以下の通り。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="./js/post.js"></script>
    </head>
    
    <body>
        <form>
            <INPUT type="button" value="submit" onClick="ajaxPostFunc('param1', 'param2');">
        </form>
    </body>
</html>

head内でjsファイルを呼び出しておき、body内のbuttonにはjsで定義した関数(ajaxPostFunc)をonClickで呼び出すように設定しておきます。
肝になるのがボタンに対してonClickを設定しておくところ。 このonClickで呼び出される関数から、ajaxの一連の処理が始まります。
後々、MySQLに格納したいデータを、ajaxPostFuncに引数として渡しておきます。
今回はparam1, param2という2つの文字列をパラメータとして渡しておきました。

post.js

post.jsのコードは以下の通り。

function ajaxPostFunc(param1, param2){
    $.post("post.php", {input1:param1, input2:param2}, function(json){alert("パラメータを2つPOSTしました");});
}

ajaxPostFuncが呼び出されると、$.postという謎の機能が働くことになります。
この機能が働くと、引数として受け取っておいたparam1, param2をpost.phpにPOSTパラメータとして渡します。
このとき、param1はinput1, param2はinput2という名前に変えて渡してあります。(説明のため) 渡し方はJSON形式なので、パラメータが増えた時も対応が簡単です。
その後、「パラメータを2つPOSTしました」というalertを表示するまでがこのjsファイルの役目です。

post.php

post.phpのコードは以下の通り。

<?php
  // MySQLへ接続する準備。DB名や認証に必要な情報を格納
  $url = "localhost";
  $user = "user";
  $pass = "password";
  $db = "sample_db";
    
  // MySQLへ接続する
  $connect = mysql_connect($url, $user, $pass) or die("MySQLへの接続に失敗しました。");

  // 手を加えるデータベースを選択する
  $sdb = mysql_select_db($db, $connect) or die("データベースの選択に失敗しました。");
    
  // POSTされたパラメータを受け取る
  $myInput1 = $_POST["input1"];
  $myInput2 = $_POST["input2"];
  $timestamp = time();
    
  // クエリを送信する
  $sql = "INSERT INTO sample_table VALUES('$timestamp', '$myInput1', '$myInput2')";
  $result = mysql_query($sql, $connect) or die("クエリの送信に失敗しました。<br />SQL:".$sql);
    
  // MySQLへの接続を閉じる
  mysql_close($connect) or die("MySQL切断に失敗しました。");    
 ?>

細かいことはコメントに書いてあるので、それを読めばどのような処理をしているかは分かるかと思います。

なお、今回はDBとして以下のようなテーブルを用意しました。

sample_table

主キーとして、今回はテキトーにtimestampを格納しておきました(笑)

なお、各ソースはgithubにアップしてあります。 git@github.com:pinkroot/php-ajax-mysql-sample.git

挙動

まず、index.htmlにアクセスするとsubmitボタンが表示されます。

submit_button

このボタンを押すと、画面がリロードされることなく、alertが表示され、ウラではDBに情報が格納されます。

POSTしましたというAlert

実際にデータベースの中身を見に行くと、param1, param2とやらが格納されているのが確認できます。

paramを格納

あとは、この渡しているparamを可変な何かにしてしまえば、自分の渡したいパラメータをページのリロード無しでDBに格納することができます。

参考にしたサイト

PHPプログラミング初心者入門講座 – PHPからMySQLデータベースに接続する方法
[jQuery]postメソッドとajaxメソッドを使ってPOST送信を行うサンプル
JQueryとPHPで作るシンプルなAJAX PHPで簡単なAjaxプログラムを作ろう (その1)

スポンサードリンク

AdSense

AdSense

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. […] なお、このajaxな仕組みについてはPHPとjQueryの組み合わせでajaxなPOSTをMySQLに格納してみたの方で詳しく説明してあります。 上記の記事を読むことで、以下のjsの動作についても理解が深 […]

  2. […] 先週にやったコーディングに関して、重要な点は以下の記事にまとめてあります。 ajaxなボタンでDOMな仕組みをjQueryした(謎) PHPとjQueryの組み合わせでajaxなPOSTをMySQLに格納してみた […]

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です