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

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

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

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

0回答

2591閲覧

ExpressにおいてAjaxで送信したformデータがundefinedになってしまう

YoshikazuAbe

総合スコア6

Node.js

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

1クリップ

投稿2015/06/07 09:50

一番下に記述したconsole.log(req.body.name)が「taro」等と入力してもundefinedとなってしまいます。
express@4.12.4
body-parser@1.12.4

app.js

lang

1// 必要なモジュールのロード 2var express = require('express'); 3var path = require('path'); 4var favicon = require('serve-favicon'); 5var logger = require('morgan'); 6var cookieParser = require('cookie-parser'); 7var bodyParser = require('body-parser'); 8var session = require('express-session') 9var connect = require('connect') 10 11// expressオブジェクトの作成 12var app = express(); 13 14// view engine setup 15app.set('views', path.join(__dirname, 'views')); 16app.set('view engine', 'jade'); 17 18// uncomment after placing your favicon in /public 19//app.use(favicon(__dirname + '/public/favicon.ico')); 20app.use(logger('dev')); 21app.use(bodyParser.urlencoded({ extended: true })); 22app.use(bodyParser.json()); 23 24// app.use(connect.bodyParser()); 25 26app.use(express.static(path.join(__dirname, 'public'))); 27 28var routes = require('./routes/index'); 29var users = require('./routes/users'); 30var index = require('./routes/index'); 31var deletes = require('./routes/delete'); 32 33app.use('/', routes); 34app.use('/users', users); 35app.use('/delete', deletes); 36 37 38 39 40// catch 404 and forward to error handler 41app.use(function(req, res, next) { 42 var err = new Error('Not Found'); 43 err.status = 404; 44 next(err); 45}); 46 47// error handlers 48 49// development error handler 50// will print stacktrace 51if (app.get('env') === 'development') { 52 app.use(function(err, req, res, next) { 53 res.status(err.status || 500); 54 res.render('error', { 55 message: err.message, 56 error: err 57 }); 58 }); 59} 60 61// production error handler 62// no stacktraces leaked to user 63app.use(function(err, req, res, next) { 64 res.status(err.status || 500); 65 res.render('error', { 66 message: err.message, 67 error: {} 68 }); 69}); 70 71 72module.exports = app; 73

index.jade

lang

1extends layout 2 3block content 4 script. 5 function func(){ 6 var form = new FormData(document.querySelector("#form1")); 7 var xhr = new XMLHttpRequest(); 8 xhr.open('POST','/',true); 9 xhr.responseType = 'json'; 10 xhr.onload = function(e){ 11 if (this.status == 200){ 12 var result = this.response; 13 var msg = '<table>' 14 + '<tr><td>メールアドレス:</td><td>' 15 + result.mail 16 + '</td></tr>' 17 + '<tr><td>電話番号:</td><td>' 18 + result.tel 19 + '</td></tr>' 20 + '</table>'; 21 document.querySelector('#msg').innerHTML = msg; 22 } 23 }; 24 xhr.send(form); 25 } 26 27 h1= title 28 p Welcome to #{title} 29 p#msg #{msg} 30 form#form1(method='post',action='javascript:return false;') 31 table 32 tr 33 td 34 p name: 35 td 36 input#name(type='text',name='name') 37 tr 38 td 39 td 40 input(type='button' value='Ajax' onclick='func();') 41 42

index.js

lang

1var express = require('express'); 2var router = express.Router(); 3 4 5/* GET home page. */ 6router.get('/', function(req, res, next) { 7 res.render('index',{ 8 title:'express', 9 msg: ('送信して下さい') 10 }) 11}); 12 13var index_post = require('./index_post') 14router.post('/',index_post.index) 15 16router.get('/index/:id', function(req, res, next) { 17 var id = req.params.id; 18 res.render('index', { title: 'Express' ,msg:"hello" + id}); 19}); 20 21 22 23module.exports = router; 24

index_post.js

lang

1var data = { 2 "taro": { 3 "mail": "st@g", 4 "tel": "aaa-aaa" 5 } 6}; 7 8exports.index = function (req,res) { 9 var name = req.body.name; 10 var result = data[name]; 11 if (result == undefined) { 12 result = {mail:'見つからない',tel:'見つからない'}; 13 } 14 res.send(result); 15 console.log(req.body.name) 16 console.log(result) 17};

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問