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

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

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

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

JavaScript

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Ajax

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2918閲覧

Ajax通信でページ移動ができない(サーバーサイドにExpress.js使用)

nullpurge

総合スコア26

Node.js

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

JavaScript

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Ajax

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/04/24 14:11

編集2018/04/24 15:38

前提

サーバーサイドはNode.jsで、フレームワークにExpressを使用しています。

現状

htmlのinputタグにおけるフォーム送信は正常に受理され、ページ移動するのですが、Ajax通信で同じことをすると、ログイン認証は通過しているものの結果的にページ移動さえされません。

まず、そもそもページ移動の際、サーバーから送られてきたhtmlファイルのデータをクライアントがどのように表示させているのかという知識がないので、解決する術がみあたらず結局ここに質問させていただきました(´;ω;`)

ファイル構成

testApp │ │ app.js │ package-lock.json │ package.json │ ├─bin │ www │ ├─node_modules │ ├─public │ ├─css │ │ login.css │ │ │ └─js │ login.js │ ├─routes │ login.js │ myPage.js │ └─views error.pug layout.pug login.pug myPage.pug

該当のソースコード

※全てのソースコードのZIPは最下部にリンクを張っています

/public/js/login.js(クライアントサイド)↓

javascipt

1window.onload = function(){ 2 3 //入力省略 4 $("input[name='username']").val('user'); 5 $("input[name='password']").val('pass'); 6 7 8 //Ajax通信 9 $('#submitButton2').on('click', function(){ 10 console.log($('#loginForm').serializeArray()); 11 $.ajax({ 12 type: 'POST', 13 url: '/myPage', 14 data: $('#loginForm').serializeArray() 15 }); 16 17 }); 18 19}; 20

/views/login.pug(クライアントサイドのページ)↓

pug

1doctype html 2html(lang='ja') 3 head 4 title= title 5 link(href='/css/login.css', rel='stylesheet') 6 script(src='http://code.jquery.com/jquery-3.3.1.js' integrity='sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=' crossorigin='anonymous') 7 script(src='/js/login.js', type='text/javascript') 8 body 9 form(method='POST' action='/myPage')#loginForm 10 .itemBlock 11 .formLabel ユーザー名 12 input(type='text' name='username') 13 .itemBlock 14 .formLabel パスワード 15 input(type='password' name='password') 16 .btnBlock 17 input(type='submit' value='INPUTタグによる送信')#submitButton1.sb 18 #submitButton2.sb Ajaxによる送信 19

app.js(サーバーサイド)↓

javascript

1var express = require('express'); 2var path = require('path'); 3var favicon = require('serve-favicon'); 4var logger = require('morgan'); 5var cookieParser = require('cookie-parser'); 6var bodyParser = require('body-parser'); 7 8var login = require('./routes/login'); 9var myPage = require('./routes/myPage'); 10 11var app = express(); 12 13// view engine setup 14app.set('views', path.join(__dirname, 'views')); 15app.set('view engine', 'pug'); 16 17// uncomment after placing your favicon in /public 18//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); 19app.use(logger('dev')); 20app.use(bodyParser.json()); 21app.use(bodyParser.urlencoded({ extended: false })); 22app.use(cookieParser()); 23app.use(express.static(path.join(__dirname, 'public'))); 24 25app.use('/' , login ); 26app.use('/login' , login ); 27app.use('/myPage', myPage); 28 29// catch 404 and forward to error handler 30app.use(function(req, res, next) { 31 var err = new Error('Not Found'); 32 err.status = 404; 33 next(err); 34}); 35 36// error handler 37app.use(function(err, req, res, next) { 38 // set locals, only providing error in development 39 res.locals.message = err.message; 40 res.locals.error = req.app.get('env') === 'development' ? err : {}; 41 42 // render the error page 43 res.status(err.status || 500); 44 res.render('error'); 45}); 46 47module.exports = app; 48

/routes/myPage.js(サーバーサイド)↓

javascript

1var express = require('express'); 2var router = express.Router(); 3 4/* GET users listing. */ 5router.get('/', function(req, res, next) { 6 res.redirect('/login'); 7}); 8 9/* POST users listing. */ 10router.post('/', function(req, res) { 11 12 var data = req.body; 13 var {username, password} = data; 14 15 console.log(data); 16 17 if(username === 'user' && password === 'pass'){ 18 res.render('myPage'); 19 console.log('ログイン成功(*´ω`)'); 20 } 21 else{ 22 res.redirect('/login'); 23 console.log('ログイン失敗(´・ω・`)'); 24 } 25 26}); 27 28module.exports = router; 29

###ソース
全体のソースコードです
https://mega.nz/#!DmZXVYZL

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

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

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

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

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

Lulucom

2018/04/24 15:30

「ログインができない」というより「ページ遷移できない(やり方がわからない)」ということでしょうか?
nullpurge

2018/04/24 15:33

そうです!まさに
Lulucom

2018/04/24 15:36

ではそのように修正された方が回答が付きやすいかと思います。
HayatoKamono

2018/04/25 04:04 編集

ajaxを利用する場合、何らかの目的のためにブラウザーをフルリロードさせたくないから利用するというケースが大半かと思いますが、何故、非同期でサーバー側と通信を行い、そして、別ページへ遷移させたいのでしょうか?サンプルコードを見る限り、非同期でやるより、今のやり方の方が好ましいように感じますが。 (とは言え、今のやり方にもおかしな部分がありますが)
nullpurge

2018/04/25 07:53

@HayatoKamotno ぐぬぬ...。そういわれてしまうと自分はすごく滑稽なことをしてるのかも・・・。そうですよね、元々ajax通信は部分的にDOMデータを更新する用途ですものね。元々別の目的にajaxを使用しようとしていて、そこから派生して今回の疑問にたどり解いたという感じです。今回の質問はhtmlのフォーム送信のようなブラウザの動作を、ajaxだけでどのようにすれば実装できるのだろうという知的欲求です。
HayatoKamono

2018/04/25 07:54

> 今回の質問はhtmlのフォーム送信のようなブラウザの動作を、ajaxだけでどのようにすれば実装できるのだろうという知的欲求です。
HayatoKamono

2018/04/25 07:55

↑ すでにPostしたデータをサーバー側で取得が出来るいることは確認できているのですよね?であれば、すでに目的のことは達成できているのでは?
nullpurge

2018/04/25 08:01

@HayatoKamono htmlにくっついているフォームのsubmit機能を実行するとpostでサーバーからhtmlドキュメント等を取得した上でurlが切り替わりレンダリングが行われるとおもうのですが(仕組みは理解できていませんが...)、それをajaxのcompleteプロパティ値となるコールバック関数で実装できないかと現在悩んでいます。
guest

回答2

0

ベストアンサー

回答の前提

修正依頼欄でもお伝えした通り、今回のようなケースではそもそも、ajax通信を行う必要はないかと思います。

その上で以下の回答は部分的に参考にして頂ければと思います。

また、以下のコードは質問文のコードをベースにしたコードにはなっていません。

クライアントサイド

<button id='submitButton'>Submit</button>
$(document).ready(function() { var $submitButton = $('#submitButton'); $submitButton.on('click', handleSubmit); function handleSubmit(event) { $.ajax({ type: 'POST', url: 'https://jsonplaceholder.typicode.com/posts', data: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }), dataType: 'json', contentType: 'application/json' }) .done(function(data) { console.log(data); location.href = 'https://codepen.io/'; }) .error(function(error) { console.log(error) }) } });

https://codepen.io/anon/pen/Vxjjwb

こちらのコードではjsonplaceholder.typicode.comというデモのAPIを公開してくれているサイトにpostリクエストを送って、postが成功して結果が返ってきたら、他のページへ遷移させるというコードになります。

冒頭に記載したとおり、ajaxでリクエストを投げて、結果が返ってきたら他のurlを表示させるということ自体が一般的にはあまり行われないので、単純にここでは、location.hrefの値を変えると、他のページをブラウザーがロードしてくれるのだということだけを読み取って参考にして下さい。

サーバーサイド

When the parameter is an Array or Object, Express responds with the JSON

representation:

https://expressjs.com/en/4x/api.html#res

res.send({ user: 'tobi' });

一般的にはajax通信でサーバー側からクライアント側に返すデータ形式はjson`形式であることが多いかと思います。
res.send()object{}array[]を渡して、クライアント側にjsonデータを返すようにしてください。

投稿2018/04/25 08:14

編集2018/04/25 12:44
HayatoKamono

総合スコア2415

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

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

nullpurge

2018/04/25 09:56

私の思い描いていた理想では、 ① ajaxでサーバーへpostでリクエストを出す ② postで送られたデータがOKだったら、サーバーがマイページ(制限されたページ)のhtmlデータを返す ③ クライアントが返されたデータを用いページ移動(url変更とレンダリング) というのを思い浮かべていたのですが、 HayatoKamono様のコードをみてみると、どこかのURLにPOSTでデータを送信して、なにかしら返ってきたら、それとは別のURLにアクセスする(GETで)というものに思えてしまいます。 おそらく何か勘違いが生じていらっしゃるかもしれません...
HayatoKamono

2018/04/25 12:35

まず、前提として質問修正依頼の方でお伝えしたとおり、今回やっていること自体がおかしなことをしているので、あまり自分の回答自体が参考になるようなものではないです。部分的に参考にして頂ければと思っています。ちょっと回答に補足を加えますね。その後に頂いた質問に回答します。
HayatoKamono

2018/04/25 12:58 編集

> 私の思い描いていた理想では、 > ① ajaxでサーバーへpostでリクエストを出す > ② postで送られたデータがOKだったら、サーバーがマイページ(制限されたページ)のhtmlデータを返す > ③ クライアントが返されたデータを用いページ移動(url変更とレンダリング) というのを思い浮かべていたのですが、 修正依頼欄の最初のコメントでも「とは言え、今のやり方にもおかしな部分がありますが」と、少し触れましたが、質問文に掲載されているコードはおかしいです。 一旦、ajaxを抜きにするとして、やりたいこととしては以下ではないでしょうか? A. loginページにアクセスしてきたユーザーにloginページを表示。(GET) B. loginページから送信されたログイン情報をチェック(POST) ---- b1. ログイン情報が正しければ、ユーザーをmypageにリダイレクト(GET) ---- b2. ログイン情報に誤りがあれば、エラー表示をしたloginページを表示(GET) C. ログイン認証をパスしたユーザーにmypageを表示(GET) D. ログイン状態ではないユーザーがmypageにアクセスしてきたら、loginページへリダイレクト 上の箇条書きをベースにすると、質問文に掲載されているコードの場合、loginページにpostするとloginページでmypageのコンテンツをloginページのurlで表示するといったようなことをしていると思います。 一旦、ajaxのことは脇において、ご自身の質問文に掲載しているコードを見直してみると良いかもしれません。
nullpurge

2018/04/25 13:04

な、なるほど.....。 POSTで認証を判別し、サーバー側で控えておき、GETでアクセスさせてそこで判別させるんですね。 なんでその発想が浮かばなかったんだろう・・・。 おそれいりました₍._.₎ 時間を割いていただきありがとうございました。
guest

0

ajax通信後に画面遷移する記述がないため遷移しないのだと思います。
ajaxは、クライアントから非同期で必要なデータをサーバに送り、
サーバーサイドで処理し、クライアントに整形済データを返す、ものなので
帰ってきたデータを使い、クライアント側での処理を記載しない限り、
クライアント側には通常なにも反映されません。

ajax通信の返り値をみてから画面遷移の処理を記載してはいかがでしょうか。

投稿2018/04/25 00:52

Atsushi_Okumura

総合スコア355

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

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

nullpurge

2018/04/25 07:54

ありがとうございます! 画面遷移の処理の方法を調べてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問