LoginSignup
2
3

Express の GET と POST のサンプル

Last updated at Posted at 2017-08-04

実行結果
express_jan20_2020.png

サーバーの起動は、

export NODE_PATH=/usr/lib/node_modules
node app.js

必要なライブラリーのインストール

sudo npm install -g express
sudo npm install -g body-parser
sudo npm install -g cfenv

フォルダー構成

$ tree
.
├── app.js
├── public
│   ├── get_post_test.js
│   └── index.html
└── routes
    └── index.js
app.js
//-------------------------------------------------------------------------
//-------------------------------------------------------------------------
// This application uses express as its web server
// for more info, see: http://expressjs.com
var express = require('express')
var routes = require('./routes')
var bodyParser = require("body-parser")


// cfenv provides access to your Cloud Foundry environment
// for more info, see: https://www.npmjs.com/package/cfenv
var cfenv = require('cfenv');

// create a new express server
var app = express()
app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json())

// serve the files out of ./public as our main files
app.use(express.static(__dirname + '/public'));

// get the app environment from Cloud Foundry
var appEnv = cfenv.getAppEnv();

app.get('/get_test',routes.get_test)

app.post('/post_test',routes.post_test)

// start server on the specified port and binding host
app.listen(appEnv.port, '0.0.0.0', function() {
  // print a message when the server starts listening
  console.log("server starting on " + appEnv.url);
});

//-------------------------------------------------------------------------
public/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="get_post_test.js"></script>
<title>Express Get Post</title>
</head>
<body>
<blockquote>
	このページは、express の GET とPOST のテストです。<p />
</blockquote>
<div id="area_get">area_get</div>
<p />
<div id="area_post">area_post</div>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Jan/31/2022 AM 08:12<p />
</body>
</html>

次の Javascript でサーバーに、GET と POST のリクエストを出します。

public/get_post_test.js
// -------------------------------------------------------------------
//	get_post_test.js
//
//					Aug/04/2017
// -------------------------------------------------------------------
jQuery (function ()
{
	jQuery("#outarea_aa").text ("*** get_post_test.js *** 開始 ***")

	get_test_proc()

	post_test_proc()

	jQuery("#outarea_hh").text ("*** get_post_test.js *** 終了 ***")
})

// -------------------------------------------------------------------
function get_test_proc()
{
	const url_ppp = '/get_test'

	const args = {"aa": "Good",
			"bb": "Morning"}

	jQuery.get(url_ppp,args,function(res)
		{
		jQuery("#area_get").html (res)
		})
}

// -------------------------------------------------------------------
function post_test_proc()
{
	const url_ppp = '/post_test'

	const args = {"aa": "See",
			"bb": "You"}

	jQuery.post(url_ppp,args,function(res)
		{
		jQuery("#area_post").html (res)
		})
}

// -------------------------------------------------------------------
routes/index.js
// -----------------------------------------------------------------------
/*
	routes/index.js

						Jan/18/2020
*/
// -----------------------------------------------------------------------
exports.get_test = function(req,res)
{
	var aa = ""
	var bb = ""
	if (req.query.aa) {
		aa = req.query.aa
		}

	if (req.query.bb) {
		bb = req.query.bb
		}

	var str_out =''
	str_out += '<h2>get_test</h2>'
	str_out += '<blockquote>'
	str_out += "aa = " + aa + '<br />'
	str_out += "bb = " + bb + '<br />'
	str_out += 'Jan/18/2020 PM 14:33<br />'
	str_out += '</blockquote>'
	res.send(str_out)
}

// -----------------------------------------------------------------------
exports.post_test = function(req,res)
{
	var aa = ""
	var bb = ""

	if (req.body.aa) {
		aa = req.body.aa
		}

	if (req.body.bb) {
		bb = req.body.bb
		}

	var str_out =''
	str_out += '<h2>post_test</h2>'
	str_out += '<blockquote>'
	str_out += "aa = " + aa + '<br />'
	str_out += "bb = " + bb + '<br />'
	str_out += 'Jan/18/2020 PM 14:33<br />'
	str_out += '</blockquote>'
	res.send(str_out)
}

// -----------------------------------------------------------------------

Bluemix で使うには、次のファイルが必要

package.json
{
	"name": "NodejsStarterApp",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"start": "node app.js"
	},
	"dependencies": {
		"express": "4.15.x",
		"cfenv": "1.0.x",
		"body-parser": "1.17.x"
	},
	"repository": {},
	"engines": {
		"node": "6.x"
	}
}
2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3