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

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

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

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

POST

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

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1044閲覧

クライアントからのPOSTで送信されたデータを表示したい

oga_a

総合スコア1

Node.js

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

POST

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

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/07/21 06:42

前提・実現したいこと

Node.jsの質問お願いします。
クライアントからサーバーに、json形式のデータをPOSTで送信した際に、
サーバー(Node.js)側でconsole.logで表示する方法を知りたいです。

index.html内の{ "aaa": "bbb" }をnode.js側のconsole.logで表示したいです。

Express等を使わない方法でお願いします。

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

req.bodyを使うとundefinedになって、
req.onを使うと[object Object]と表示されてしまいます。

該当のソースコード

index.html

html

1<html> 2 3<head> 4 <title>テスト</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6</head> 7 8<body> 9 <button onclick="func()">送信</button> 10</body> 11 12<script lang="javascript"> 13 const xhr = new XMLHttpRequest(); 14 function func() { 15 xhr.open('POST', "/api"); 16 xhr.send({ "aaa": "bbb" }); 17 }; 18</script> 19 20</html>

index.js

javascript

1const http = require('http'); 2const fs = require('fs'); 3 4const server = http.createServer((req, res) => { 5 if (req.url === '/') { 6 fs.readFile('./index.html', (err, data) => { 7 res.writeHead(200, { 'Content-Type': 'text/html' }); 8 res.write(data); 9 res.end(); 10 }); 11 } 12 if (req.url === '/api') { 13 14 // 色々やってみたが分からなかった 15 16 // req.on('data', function (chunk) { 17 // console.log(chunk); 18 // console.log(chunk.toString('UTF-8')); 19 20 // console.log(chunk.toJSON().data.toString('UTF-8')); 21 // }).on('end', function () { 22 23 // }) 24 25 // console.log(req.body); 26 res.end(); 27 28 } 29}); 30server.listen(3000);

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

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

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

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

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

yoorwm

2020/07/21 06:46

そのconsoleというのはどこにあるんですか?
oga_a

2020/07/21 06:53

index.jsのコメントアウトしている箇所に正しいプログラムを書いて、"bbb"と表示したいです。
oga_a

2020/07/21 06:54

console.logで表示したいです。
guest

回答1

0

ベストアンサー

req.onを使うと[object Object]と表示されてしまいます

JSON はテキストフォーマットです。- XMLHttpRequset で send() する際、文字列化していないため、"[object Object]" が送信されています。

diff

1- xhr.send({ "aaa": "bbb" }); 2+ xhr.send(JSON.stringify({ "aaa": "bbb" }));

index.html内の{ "aaa": "bbb" }をnode.js側のconsole.logで表示したいです。

javascript

1const http = require('http'); 2//const fs = require('fs'); 3const html =`<!DOCTYPE html> 4<html> 5<head> 6 <meta charset="UTF-8"> 7 <title>テスト</title> 8</head> 9<body> 10 <button onclick="func()">送信</button> 11</body> 12<script lang="javascript"> 13function func() { 14 // func() 内で宣言し、関数を抜けた後はガベージコレクタに回収させる 15 const xhr = new XMLHttpRequest(); 16 xhr.open('POST', "/api"); 17 xhr.setRequestHeader("Content-Type","application/json"); 18 xhr.send(JSON.stringify({ "aaa": "bbb" })); 19}; 20</script> 21</html>`; 22 23const server = http.createServer((req, res) => { 24 let { headers, url } = req; 25 if (req.url === '/') { 26 console.log( url ); 27 console.log( headers ); 28 res.writeHead(200, { 'Content-Type': 'text/html' }); 29 res.end(html); 30 } 31 else if (req.url === '/api') { 32 console.log( url ); 33 console.log( headers ); 34 let data = ""; 35 req.on("data",(buf)=>{ 36 data += buf.toString("utf8"); 37 }) 38 req.on("end",()=>{ 39 console.log( data ); // 結果表示 40 res.writeHead(200, { 'Content-Type': 'text/plain' }); 41 res.end("OK"); 42 }) 43 } 44 // favicon など 45 else { 46 res.writeHead(500, { 'Content-Type': 'text/plain' }); 47 res.end("Internal Server Error"); 48 } 49}); 50server.listen(3000); 51

コメントを受けて追記

JSON.stringifyを使わずに送信することはできますか?

HTTP通信でやり取りされるデータは json.org が公開するテキストの形 "{\"aaa\":\"bbb\"}"にする必要がありますので、ネイティブ実装された JSON.stringify() を介するのが手軽です。
JSON.stringifyを使わずに実装する場合、自前で変換関数を実装するので、無駄なコストになります。

つまり、json形式のまま送信してサーバーサイドで表示することは可能でしょうか?

JavaScriptコード中の { "aaa":"bbb" } はJSONではなく、オブジェクトリテラルです。
JSONと混同して考えてはいけません。
オブジェクトリテラル(Object)を暗黙の文字列化が働いて [object Object] になっています。

投稿2020/07/21 08:23

編集2020/07/21 22:34
AkitoshiManabe

総合スコア5434

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

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

oga_a

2020/07/21 08:37

JSON.stringifyを使わずに送信することはできますか? つまり、json形式のまま送信してサーバーサイドで表示することは可能でしょうか?
AkitoshiManabe

2020/07/21 08:51

JSON.stringifyを使ってください。詳細を追記しています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問