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のコードは以下の通り。

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

post.js

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

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

post.php

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

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

なお、今回は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)

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

SNSでもご購読できます。

コメント

Comments are closed.