form送信方法 #HTML #javascript
基本知識
HTMLからサーバーサイドプログラムへのデータ送信
submitイベント発火時に、formで囲まれたname属性で指定した名前とvalue属性の値が一組になって送信される. action属性:フォーム経由で送信された情報を処理するプログラムの URI. method属性:フォームを送信する際にブラウザーが使用するHTTPメソッド.
$_POST, $_GET
PHPの関数で、HTTPで取得した値を連想配列で取得する.
標準出力関数
PHPでは、下記の関数が提供されている. echo, var_dump, print_r, var_export サーバーサイドプログラムで処理した結果等をブラウザに表示する際に用いる.
非同期通信(Ajax)
サーバーとの通信, データの交換, ページの更新を, ページの再読み込みなしに行うことができる.
form送信方法
1. HTMLのsubmit属性の利用
1-1. 単一form
<html> <head><meta charset="utf-8"></head> <body> <form action="index.php" method="post"> <input type="text" id="text" name="text" value=""> <button type="submit" name=button" value="input">送信</button> <!-- * input要素での記述は下記のとおり. * <input type="submit" name="button" value="送信"> --> </form> </body> </html>
1-2. 複数form
<html> <head><meta charset="utf-8"></head> <body> <form action="index1.php" method="post"> <input type="text" id="text" name="text" value=""> <button type="submit" name=button1" value="input">送信</button> <!--index1.phpにデータが送信される.--> </form> <form action="index2.php" method="post"> <input type="text" id="text" name="text" value=""> <button type="submit" name=button2" value="input">送信</button> <!--index2.phpにデータが送信される.--> </form> </body> </html>
2. javascriptの利用
2-1. submit関数
<html> <head><meta charset="utf-8"></head> <body> <form action="index1.php" method="post"> <input type="text" name="text" value=""> <button id="button" value="input">送信</button> </form> <script src="http://code.jquery.com/jquery.js"></script> <script> $(function(){ $('button').click(function(){ $('form').submit(); }); }) </script> </body> </html>
2-2. Ajax
<html> <head><meta charset="utf-8"></head> <body> <form> <input type="text" id="text" name="text" value=""> <button type="button" id="button" name="button" value="input">送信</button> </form> <script src="http://code.jquery.com/jquery.js"></script> <script> $(function(){ $('#button').click(function(){ $.ajax({ url: 'http://localhost:8080/index1.php', type: 'post', data: $('form').serialize(), // form内のtype属性がbutton, submitのデータ以外が送信される. /* 送信するデータを指定する場合 data: { text: $('#text').val() }, */ timeout: 10000, }) .then( function(data) { // 通信が成功したときの処理 document.write(data); // index1.phpで処理された結果でhtmlを書き換える. }, function(data) { // 通信が失敗したときの処理 }); }); }); </script> </body> </html>
簡易開発環境構築 #Mac OS X #PHP #Sqlite #ビルトインウェブサーバー
背景
・プロトタイプやテスト, 小さいロジックの動作確認等でIDEや仮想環境を構築して利用するのは規模が大きいと感じたため.
・初心者がWebアプリケーションの基本を学ぶときに、上記に挙げた環境構築から始めるのは敷居が高く時間がかかるため.
目的
プロトタイプやテスト, 小さいロジックの動作確認をサクッとする.
方法
1. db構築
任意のディレクトリ配下で下記コマンド実行するとdbが生成される
$ sqlite3 データベース名.sqlite $ sqlite> .database $ sqlite> .exit
2. phpをサーバーモードで起動(このとき、DB起動必要なし)
$ php -S localhost:8080
以上.
備考
記述方法
<?php // DB接続 $db = new SQLite3("DBが置かれているパス"); ?>