かねしろ@pinkrootです。昨日は久しぶりにPHPでのコーディングを行いました。イメージとしては、ボタンを押しても画面がリロード(更新)されず、処理の裏側で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ディレクトリを作成し、その中にまとめて置きました。.ProjectDirectoryindex.htmlpost.php.jsjquery-1.7.2.min.jspost.jsというようなディレクトリ構成。index.htmlindex.htmlのコードは以下の通り。&#039;param2&#039;);&quot;&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;head内でjsファイルを呼び出しておき、body内のbuttonにはjsで定義した関数(ajaxPostFunc)をonClickで呼び出すように設定しておきます。肝になるのがボタンに対してonClickを設定しておくところ。このonClickで呼び出される関数から、ajaxの一連の処理が始まります。後々、MySQLに格納したいデータを、ajaxPostFuncに引数として渡しておきます。param2という2つの文字列をパラメータとして渡しておきました。post.jspost.jsのコードは以下の通り。function(json){alert(&quot;パラメータを2つPOSTしました&quot;);});}ajaxPostFuncが呼び出されると、$.postという謎の機能が働くことになります。param2をpost.phpにPOSTパラメータとして渡します。param2はinput2という名前に変えて渡してあります。渡し方はJSON形式なので、パラメータが増えた時も対応が簡単です。その後、「パラメータを2つPOSTしました」というalertを表示するまでがこのjsファイルの役目です。post.phppost.phpのコードは以下の通り。MySQLへ接続する準備。die(&quot;MySQLへの接続に失敗しました。die(&quot;データベースの選択に失敗しました。die(&quot;クエリの送信に失敗しました。die(&quot;MySQL切断に失敗しました。MySQLへ接続する準備。die(&quot;MySQLへの接続に失敗しました。die(&quot;データベースの選択に失敗しました。die(&quot;クエリの送信に失敗しました。die(&quot;MySQL切断に失敗しました。&quot;);?&gt;細かいことはコメントに書いてあるので、それを読めばどのような処理をしているかは分かるかと思います。今回はDBとして以下のようなテーブルを用意しました。主キーとして、今回はテキトーにtimestampを格納しておきました(笑)なお、各ソースはgithubにアップしてあります。git@github.com:pinkroot/php-ajax-mysql-sample.git挙動まず、index.htmlにアクセスするとsubmitボタンが表示されます。このボタンを押すと、画面がリロードされることなく、alertが表示され、ウラではDBに情報が格納されます。param2とやらが格納されているのが確認できます。あとは、この渡しているparamを可変な何かにしてしまえば、自分の渡したいパラメータをページのリロード無しでDBに格納することができます。PHPSNSでもご購読できます。駿一郎90年生まれの沖縄人。在学中にプログラミングコンテストと起業家コンテストそれぞれで日本二位を獲得。2016年から株式会社misosilの代表取締役を務めています。*メールアドレス(公開はされません。