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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

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

Q&A

解決済

2回答

1218閲覧

[Ajax]サーバー側でPOST通信の受信が反応しない

mote

総合スコア128

Node.js

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

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

1グッド

0クリップ

投稿2020/03/14 10:00

編集2020/03/14 11:35

#今回やりたい事
フロントサイド(jquery)からバックエンド(Node.js)にajaxで通信をしたいです.
#環境
heroku
jquery
node.js(expressは使っておりません)urlモジュールとhttpsモジュールを使っています

#現状
jquery ajaxでpost通信を行おうとしますが,
どうもreq.on("data")が着火しません.
偶に,コンソールを見ると上手くpost受信ができるという
謎な現象に陥ってしまいました...
参考にしたサイト node.jsのpost通信
ajax 2018

サーバーサイドは

js

1if(req.method == "POST"){ 2 console.log("post") ; 3 req.on('data', function(chunk) { 4 let data = "" ; 5 data += chunk ; 6 console.log("post受信") 7 }); 8 res.end() ; 9 10 }

フロントサイドは

js

1$(`form[name="fff"]`).submit(function(e){ 2 // var button = $(this); 3 // button.attr("disabled", true); 4 e.preventDefault() ; 5 6 let sei = $("#sei").val() ; 7 let mei = $("#mei").val() ; 8 let ksei = $("#k-sei").val() ; 9 let kmei = $("#k-mei").val() ; 10 let university = $(`select[id="university"] option:selected`).text() ; 11 let nyusya = $(`select[id="nyusya"] option:selected`).text() ; 12 let user = $(`input[id="user"]`).val() ; 13 14 let sex ; 15 if($(`input[id="man"]`).prop(`checked`)){ 16 sex="m" 17 }else{ 18 sex="f" 19 } ; 20 let gakubukeitou = $(`select[id="gakubukeitou"] option:selected`).text() ; 21 let gakubu = $("#gakubu").val() ; 22 let gakka = $("#gakka").val() ; 23 let katei ; 24 if($(`input[id="gakubusei"]`).prop(`checked`)){ 25 katei = "学部生" 26 }else{ 27 katei = "院生" 28 } ; 29 let mailaddress =$(`#mail`).val() ; 30 let graduate = $(`select[id="graduate"] option:selected`).text() ; 31 let graduatemonth = $(`select[id="graduatemonth"] option:selected`).text() ; 32 let genre = $(`select[id="genre"] option:selected`).text() ; 33 let target = $(`select[id="target"] option:selected`).text() ; 34 let tel = $("#tel-num").val() ; 35 let lineID = $("#lineID").val() ; 36 let password = $(`input[id="inputPassword5"]`).val() ; 37 let date_detail = dateToFormatString(new Date(), '%YYYY%年%MM%月%DD%日 (%w%) %HH%時%mm%分'); 38 let deiba=$("#deiba").prop(`checked`) ; 39 let deiba_TF ="T" ; 40 41 if(deiba){ 42 deiba_TF = "T" ; 43 }else{ 44 deiba_TF = "F" ; 45 } 46 47 let notification = $("#notification").prop(`checked`) ; 48 let notification_TF ="T" ; 49 50 if(notification){ 51 notification_TF = "T" ; 52 }else{ 53 notification_TF = "F" ; 54 } 55 56let regbox={ 57 user : user , 58 mail_address : mailaddress , 59 password : password , 60 last_name : sei , 61 first_name:mei , 62 last_name_kana : ksei , 63 first_name_kana : kmei , 64 sex : sex , 65 phone_no : tel , 66 university_id : university , 67 course_type : katei , 68 faculty_name : gakubu , 69 faculty_keito : gakubukeitou , 70 department_name : gakka , 71 entering_year : nyusya , 72 genre : genre , 73 target : target , 74 lineID : lineID , 75 created :date_detail , 76 file : "", 77 graduate : graduate , 78 graduatemonth : graduatemonth , 79 deiba_TF : deiba_TF, 80 notification_TF : notification_TF 81} 82 83$.ajax({ 84 type: 'POST', 85 url : '/restreg', 86 data:JSON.stringify(regbox) , 87}).done(function() { 88 alert("成功") 89 // location.href = '/login'; 90 }).fail(function() { 91 alert('error'); 92 }) 93}) 94 95

です.
おねがいします

#追記
jqueryの送信は毎回成功しています
毎回失敗するわけではないのですがなぜでしょうか?
ログを載せておきます
ログ

s.k👍を押しています

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

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

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

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

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

guest

回答2

0

自己解決

どうやらクロスドメインでひっかかっていました.
expressの記法しか書いてなかったので,
httpに対応させた方法を載せておきます.

js

1 res.setHeader('Access-Control-Allow-Origin', '*') 2 res.setHeader('Access-Control-Request-Method', '*') 3 res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET') 4 res.setHeader('Access-Control-Allow-Headers', '*')

投稿2020/03/14 23:49

mote

総合スコア128

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

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

0

NodeJS側の変数宣言 let data = "" のスコープを確認してください。

チャンクを蓄積するには、req.on('data', func) の外で初期化する必要があります。

javascript

1// NodeJS 2 3let data = ""; 4req.on('data', function(chunk) { 5 //let data = "" ; 6 data += chunk ; 7 console.log("post受信") 8}); 9// 追記部分 10req.on('end',function(){ 11 console.log("受信完了"); // data を処理して res の処理を書く 12});

req は http.IncomingMessage < ReadableStream のような実装のはずですので、イベントなどをご確認ください。

また、npm formidable のような、受信データを処理するモジュールもあります(express.bodyParserなどで利用されているモジュール)。

投稿2020/03/14 10:24

編集2020/03/14 11:51
AkitoshiManabe

総合スコア5432

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

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

mote

2020/03/14 11:26

ご回答ありがとうございます. ご指摘通りに直してみましたが, しかしやはり改善には至りませんでした...
AkitoshiManabe

2020/03/14 11:54

express などのフレームワークを使わない場合は、コールバック地獄で記述することになると思いますのでオブジェクトのイベントを把握する必要があります。 req.on("end") など、必要と思われるイベントを処理していないなど、公式ドキュメントの確認不足ではないでしょうか。
mote

2020/03/14 23:55

ご回答ありがとうございました. req.on("end")はこちらに記述をするのを忘れていました. 今回はCORSで引っかかっていました.headに設定することによって解決致しました. formidableは使ったことがあるのですが,ファイルアップ用の大きな容量を通信する為のモジュールみたいですので,今回はJSONの送信の為,必要無かったです.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問