質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

Q&A

1回答

3084閲覧

node.jsでPOSTの値を受け取れるようにしたいです。

harigoE8

総合スコア10

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

0グッド

0クリップ

投稿2021/12/19 07:30

前提・実現したいこと

node.jsでお問合せフォームの作成。

発生している問題・エラーメッセージ

入力フォームを作り、送信しても遷移先のページで値を受け取れていません。
パスも変えたりなど試しましたが、さっぱり原因が分からない状況です。
まだファイル構成やどこが作用しているのかなど理解ができていない為このような問題に直面しております。

参考になるサイトやアドバイスを頂けますと助かります。

送信すると ↓ が出ます。 Cannot POST /post.html

該当のソースコード

sample/src/ejs/contact/index.ejs(入力フォーム)

<% var title = "contact"; var description = "お問合せページのdescription"; %> <% include src/ejs/template/_head %> <!-- prettier-ignore --> <!-- 問合せフォーム ▼ここから▼ --> <form action="/post.html" method="POST" onsubmit="return verifyContactForm();"> <div class="form-group"> <label for="guest_name">お名前 : </label> <input id="guest_name" class="form-control" placeholder="(例)山田 太郎" /> </div> <div class="form-group"> <label for="guest_email">メールアドレス : </label> <input id="gurst_email" class="form-control" placeholder="(例)example.com" /> </div> <div class="form-group"> <label for="mail_subject">件名 : </label> <input type="text" id="mail_subject" class="form-control" placeholder="(例)javascriptについて" /> </div> <div class="form-group"> <label for="mail_body">本文 : </label> <textarea id="mail_body" class="form-control" placeholder="※お問合せ内容をご記載ください。" ></textarea> </div> <div class="form-group text-right"> <button class="btn btn-primary" >送信</button> </div> </form> <% include src/ejs/template/_footer %>

/sample/src/ejs/contact/post.ejs(受け取り先)

<% var title = "contact"; var description = "お問合せページのdescription"; %> <% include src/ejs/template/_head %> <% var guest_name = $_POST['guest_name'] %> <!-- prettier-ignore --> <script type="text/javascript"> console.log($guest_name); </script> <% include src/ejs/template/_footer %>

試したこと

routerやwebpackの所の設定かと思い、いじってみましたが変化がないので
初期の状態に戻しました。

sample/src/js/modules/Router.js

import Home from '../pages/Home' import About from '../pages/About' export default class Router { constructor() { this.model = { pathName: location.pathname, } this.initRouting() } initRouting() { const pathName = this.model.pathName switch (pathName) { case '/': new Home() break case '/about': new About() break default: break } } }

sample/webpack.config.js

const webpack = require('webpack') const path = require('path') const UglifyJSPlugin = require('uglifyjs-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const CleanWebpackPlugin = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin') const globImporter = require('node-sass-glob-importer') const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = (env, argv) => { const PRODUCTION = argv.mode === 'production' return { entry: './src/js/index.js', output: { filename: PRODUCTION ? 'assets/javascripts/bundle[hash].js' : 'assets/javascripts/bundle.js', path: path.join(__dirname, 'public'), }, plugins: [ new CleanWebpackPlugin([ 'public/assets/stylesheets', 'public/assets/javascripts', ]), new MiniCssExtractPlugin({ filename: PRODUCTION ? 'assets/stylesheets/bundle[hash].css' : 'assets/stylesheets/bundle.css', }), // ejs new HtmlWebpackPlugin({ filename: 'index.html', template: 'src/ejs/index.ejs', }), new HtmlWebpackPlugin({ filename: 'about/index.html', template: 'src/ejs/about/index.ejs', }), new HtmlWebpackPlugin({ filename: 'introduction/index.html', template: 'src/ejs/introduction/index.ejs', }), new HtmlWebpackPlugin({ filename: 'contact/index.html', template: 'src/ejs/contact/index.ejs', }), new HtmlWebpackPlugin({ filename: 'contact/post.html', template: 'src/ejs/contact/post.ejs', }), new HtmlWebpackPlugin({ filename: 'work/index.html', template: 'src/ejs/work/index.ejs', }), new HtmlWebpackPlugin({ filename: '404.html', template: 'src/ejs/404/index.ejs', }), // php new CopyWebpackPlugin( PRODUCTION ? [ { from: './src/api/*.php', to: path.resolve(__dirname, 'public/api'), flatten: true, }, ] : [] ), ], resolve: { extensions: [ '.js', // for style-loader ], }, devtool: PRODUCTION ? 'none' : 'source-map', optimization: { minimizer: PRODUCTION ? [ new UglifyJSPlugin({ uglifyOptions: { compress: { drop_console: true, }, }, }), ] : [], }, module: { rules: [ { test: /.ejs$/, use: 'ejs-compiled-loader', }, { test: /.scss$/, use: [ MiniCssExtractPlugin.loader, // javascriptとしてバンドルせず css として出力する { loader: 'css-loader', options: { url: false,// sassで相対パスを書けるようにする sourceMap: true, }, }, { loader: 'postcss-loader', options: { sourceMap: true, plugins: [ require('cssnano')({ preset: 'default', }), require('autoprefixer')({ grid: true }), ], }, }, { loader: 'sass-loader', options: { importer: globImporter(), sourceMap: true, }, }, ], }, { test: /.js$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', options: { presets: [['@babel/preset-env', { modules: false }]], }, }, ], }, { enforce: 'pre', test: /.js$/, exclude: /node_modules/, loader: 'eslint-loader', }, ], }, devServer: { contentBase: path.resolve(__dirname, 'public'), port: 8080, }, } }

補足情報(FW/ツールのバージョンなど)

node v12.6.0
npm 6.9.0
webpack 5.65.0

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

送信すると ↓ が出ます。
Cannot POST /post.html

とのことですので、

<form action="/post.html" method="POST"

ここが異なるように見えました。

パスも変えたりなど試しましたが、

こちらの試した内容も具体的にご記載いただいた方が良いのかな?とも思いました。

js

1 new HtmlWebpackPlugin({ 2 filename: 'contact/index.html', 3 template: 'src/ejs/contact/index.ejs', 4 }), 5 new HtmlWebpackPlugin({ 6 filename: 'contact/post.html', 7 template: 'src/ejs/contact/post.ejs', 8 }),

こちらを見ると、contact/post.htmlのパスに送信する必要があると思いました。
post.html(ドキュメントルートを表す先頭のスラッシュなし・相対的なパス)か/contact/post.htmlに変更してみたらいかがでしょうか。

・contact/index.html は表示できているのかな?と思いまして、上記のような回答をさせていただきました

投稿2021/12/19 09:06

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/12/20 02:19

`$_POST['guest_name']` は送信した値を取得するためのものですかね。 全体的な構成やejsなどの知識がないためわからないのですが、 `$_POST`はPHPの事前定義された変数のことでしょうか? https://www.php.net/manual/en/reserved.variables.post.php ejsはテンプレートのためのものだと思っていましたので、 `$_POST`などを使って送信した値なども参照することができるのか・・ Node.jsで送信された値を使用するには、Expressなどが必要そうに思いました。 http://expressjs.com/en/5x/api.html#app.post.method
harigoE8

2021/12/20 02:32

`$_POST['guest_name']` は送信した値を取得するためのものですかね。 ーーーはい。おっしゃる通りです。 全体的な構成やejsなどの知識がないためわからないのですが、 `$_POST`はPHPの事前定義された変数のことでしょうか? ーーーーーPHPの方には何も定義しておりません。自分も今回初めてejsに触れているのでよく分かっていない次第です。 Node.jsで送信された値を使用するには、Expressなどが必要そうに思いました。 ーーーーーなるほど。Expressですね!試してみます!ありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問