前提・実現したいこと
Expressを使用して、簡単な入力フォームを作ろうと考えています。
jadeページ上のフォームに必要事項を入力し、ボタンを押下すると、
同じページに確認画面(入力内容)が表示されるという仕様にしたいです。
ajaxを用いて画面遷移せずに行いたいのですが、
node.jsもajaxも未経験の為、コードがなかなか通りません。
おそらく凡ミスだと思うのですが…ご教示願います。
発生している問題・エラーメッセージ
unexpected text { Error: C:\Users**********\views\index.jade:13 11| script. 12| $('#form1').on('submit', function(event) > 13| { 14| event.preventDefault(); 15| $.post( 16| $(this).attr('action'),
該当のソースコード
index.jade
1extends layout 2 3block content 4 tr 5 th 6 h1= title 7 form(id="form1",action="/", method="post") 8 input(name='username' , type="text") 9 input(type="submit", value="実行") 10 11 script. 12 $('#form1').on('submit', function(event) 13 { 14 event.preventDefault(); 15 $.post( 16 $(this).attr('action'), 17 $(this).serializeArray(), 18 function(result) { 19 alert('アラート'); 20 }, 21 'json' 22 ); 23 }); 24
index.js
1var express = require('express'); 2var router = express.Router(); 3 4/* GET home page. */ 5router.get('/', function(req, res, next) { 6 res.render('index', { title: 'Express' }); 7}); 8 9router.post('/', function(req, res){ 10 var result = { 11 username: req.body.username 12 }; 13 res.render('index', index); 14});
app.js
1var createError = require('http-errors'); 2var express = require('express'); 3var path = require('path'); 4var cookieParser = require('cookie-parser'); 5var logger = require('morgan'); 6 7var indexRouter = require('./routes/index.js'); 8var usersRouter = require('./routes/users.js'); 9 10var app = express(); 11 12// view engine setup 13app.set('views', path.join(__dirname, 'views')); 14app.set('view engine', 'jade'); 15 16app.use(logger('dev')); 17app.use(express.json()); 18app.use(express.urlencoded({ extended: false })); 19app.use(cookieParser()); 20app.use(express.static(path.join(__dirname, 'public'))); 21 22app.use('/', indexRouter); 23app.use('/users', usersRouter); 24 25// catch 404 and forward to error handler 26app.use(function(req, res, next) { 27 next(createError(404)); 28}); 29 30// error handler 31app.use(function(err, req, res, next) { 32 // set locals, only providing error in development 33 res.locals.message = err.message; 34 res.locals.error = req.app.get('env') === 'development' ? err : {}; 35 36 // render the error page 37 res.status(err.status || 500); 38 res.render('error'); 39}); 40 41module.exports = app; 42
試したこと
Ajaxの実装方法をいくつか試しましたが、
いずれもエラーとなりました。
回答1件
あなたの回答
tips
プレビュー