前提
サーバーサイドは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
回答2件
あなたの回答
tips
プレビュー