PHP編GET／POST
フォームに入力された値をGET／POSTで取得するやり方PHP編
GETメソッド
/var/www/html/に次の２つのphpファイルを作成
http_get_index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTTPメソッドテスト</title>
</head>
<body>
<h1>HTTP Getテスト</h1>
<form action="http_get_result.php" method="get">
id：<input type="text" name="id"/><br />
名前：<input type="text" name="name"/><br />
<input type="submit" value="送信" />
</form>
</body>
</html>
http_get_result.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>HTTP Getの結果</h1>
<div>id=
<?php
if(isset($_GET['id'])){
$id = $_GET['id'];
echo $id;
}
?>
</div>
<div>名前=
<?php
if(isset($_GET['name'])){
$name = $_GET['name'];
echo $name;
}
?>
</div>
<pre>$_SERVER['REQUEST_METHOD'] = <?php echo($_SERVER['REQUEST_METHOD']) ?></pre>
<pre>$_SERVER['QUERY_STRING'] = <?php echo($_SERVER['QUERY_STRING']) ?></pre>
<pre>$_SERVER['REQUEST_URI'] = <?php echo($_SERVER['REQUEST_URI']) ?></pre>
<pre><?php //var_dump($_SERVER) ?></pre>
</body>
</html>実行
Webブラウザでhttp://raspberry/http_get_index.phpを開くと
送信ボタンを押すとhttp_get_result.phpで処理された結果が表示される。
POSTメソッド
基本はGETメソッドと同じ、GETがPOSTに変わるだけなので、省略。
異なるのは、？以下の「?id=123&name=練習」が無いだけ。
Node.js編GET／POST
出典：入門
PHPと同じことをNode.jsでやってみる。 よく分からないので、出典元の真似と力業に頼るだけ。 実際にやっているのは、これだけ。
１．index.htmlを表示
２．index.htmlのformに入力したname、ageの値を読みとる。
３．resp.htmlの@name@、@age@と入力値を置換。
４．置換後のresp.htmlを表示
POSTメソッド
server03.js
var http = require('http');
var qs = require('querystring');
var html = require('fs').readFileSync('views/index.html');
var fs = require('fs');
var server = http.createServer(function(req, res) {
if(req.method === 'GET') {
res.writeHead(200, {'Content-Type' : 'text/html'});
res.end(html);
} else if(req.method === 'POST') {
var data = '';
//POSTデータを受けとる
req.on('data', function(chunk) {data += chunk})
.on('end', function() {
console.log(data);
var post = qs.parse(data);
var data2 = '';
fs.readFile('views/resp.html','utf8',function(err,data2){
if(err){
return console.log(err);
}
var data3 = data2.
replace(/@name@/g,post.name).
replace(/@age@/g,post.age);
res.writeHead(200, {'Content-Type' : 'text/html'});
res.write(data3);
res.end();
});
})
}
}).listen(8080);resp.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>回答サイト</title>
</head>
<body>
<h1>回答サイト</h1>
<pre>
名前：@name@<br>
年齢：@age@<br>
</pre>
</body>
</html>index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプルサイト</title>
</head>
<body>
<h1>サンプルサイト</h1>
<form method="POST">
名前：<input type="text" name="name"><br>
年齢：<input type="number" name="age"><br>
<input type="submit">
</form>
</body>
</html>実行
$ node server03
server04.jsの別解
同期関数を用いた、次のやり方がスッキリしている気が、いずれにしても色々なサイトからの寄せ集めのコードでお恥ずかしい限り
var http = require('http');
var qs = require('querystring');
var html = require('fs').readFileSync('views/index.html');
var resphtml = require('fs').readFileSync('views/resp.html','utf-8');
var server = http.createServer(function(req, res) {
if(req.method === 'GET') {
res.writeHead(200, {'Content-Type' : 'text/html'});
res.end(html);
} else if(req.method === 'POST') {
var data = '';
//POSTデータを受けとる
req.on('data', function(chunk) {data += chunk})
.on('end', function() {
console.log(data);
var post = qs.parse(data);
var data2 = resphtml.
replace(/@name@/g,post.name).
replace(/@age@/g,post.age);
res.writeHead(200, {'Content-Type' : 'text/html'});
res.write(data2);
res.end();
});
}
}).listen(8080);