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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

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

JavaScript

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

jQuery

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

Ajax

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

Q&A

解決済

3回答

4148閲覧

AjaxのtypeがPOSTの場合、404が発生

ShoSakata

総合スコア20

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

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

JavaScript

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

jQuery

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

Ajax

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

0グッド

1クリップ

投稿2019/01/07 10:50

前提・実現したいこと

Ajax及びJSONを用いて、js(フロント)とNode.js(サーバー)間の値を連携したいです。

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

下記のソースコードを実行したところ、下記のログ①が出力されます。

ログ① POST http://localhost:3000/node_modules/mysql/tutor-search-server.js 404 (Not Found) XMLHttpRequest : 404 tutor-search-client.js:16 textStatus : error tutor-search-client.js:17 errorThrown : Not Found

下記のソースコードの「type: 'post',」をコメントアウトしたところ、ログが下記のログ②へ変化するため、
「type: 'post',」が何らかの影響を及ぼしているかと思いますが、404の真因が特定できずにいます。

ログ② XMLHttpRequest : 200 tutor-search-client.js:16 textStatus : parsererror tutor-search-client.js:17 errorThrown : SyntaxError: Unexpected token ' in JSON at position 0

該当のソースコード

js

1--ファイル名:tutor-search-client.js(js) 2 3"use strict"; 4$(function(){ 5 $("#searchBtn").click(function(){ 6 $.ajax({ 7 async: false, 8 url: './node_modules/mysql/tutor-search-server.js', 9 //type: 'post', 10 data:{"name": "musa"}, 11 dataType: 'json' 12 }).done(function(res){ 13 console.debug(res); 14 }).fail(function(xhr, status, error){ 15 alert(status); 16 console.log("XMLHttpRequest : " + xhr.status); 17   console.log("textStatus : " + status); 18   console.log("errorThrown : " + error); 19 20 }); 21 22 }); 23 });
--ファイル名:tutor-search-server.js(Node.js) 'use strict'; var express = require('express'); var bodyParser = require('body-parser'); var app = express(); app.use(bodyParser.urlencoded({extended: false})); app.use(bodyParser.json()); app.use(function(req, res, next){ res.header("Access-Control-Allow-Origin","*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }) app.post('/',function(req, res){ var obj = {}; console.log('body: ' + JSON.stringify(req.body.name)); var rejson = JSON.stringify(req.body); res.send(rejson); }); app.listen(3000);

お手数ですが、よろしくお願いします。

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

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

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

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

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

guest

回答3

0

ベストアンサー

app.post('/',function(req, res){

app.listen(3000);

と書かれているのですから、POSTを受け付けているのは http://localhost:3000 です。

url: './node_modules/mysql/tutor-search-server.js',

はソースがあるパスですよね。

投稿2019/01/08 09:56

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

guest

0

jQuery 1.9.0 以降では、type ではなくmethod を使うべきですが、そちらで試してみましたか?

type (default: 'GET')
Type: String
An alias for method. You should use type if you're using versions of jQuery prior to 1.9.0.

投稿2019/01/08 01:03

編集2019/01/08 01:05
tacsheaven

総合スコア13703

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

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

0

ajaxではなく普通のformを利用してpostデータを受け取ったときにどう反応するかで
ある程度判断できると思います

投稿2019/01/08 00:49

yambejp

総合スコア114505

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

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

ShoSakata

2019/01/08 03:22

htmlとnode.jsに以下の記載したところ、画面に「Cannot POST /node_modules/mysql/tutor-search-server.js」の表示が出ました。コードは以下のサイトを参考にして書いています。(https://www.sejuku.net/blog/53627) ---test.html <form action="node_modules/mysql/tutor-search-server.js" method="POST"> <input name="mytext" type="text"> <input type="submit" value="送信"> </form> ---test.html ---tutor-search-server.js xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status === 200) { console.log( xhr.responseText ); } } ---tutor-search-server.js
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問