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

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

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

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

Ajax

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

jade

Jade(ジェイド)は、Hamlに影響を受けて開発されたJST(JavaScript Templates)のひとつです。Node.jsで動かすことができます。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2139閲覧

Ajaxで画面遷移させずに入力文字を出力

atmn3356

総合スコア157

Node.js

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

Ajax

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

jade

Jade(ジェイド)は、Hamlに影響を受けて開発されたJST(JavaScript Templates)のひとつです。Node.jsで動かすことができます。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/04/26 04:34

編集2018/04/26 05:12

前提・実現したいこと

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の実装方法をいくつか試しましたが、
いずれもエラーとなりました。

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

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

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

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

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

m.ts10806

2018/04/26 04:39

Node.jsもタグに追加しておいてください。
m.ts10806

2018/04/26 04:39

エラーメッセージ等はでていますか?でているようであれば質問に追記してください。
m.ts10806

2018/04/26 04:41

あ、404ですね。404は存在しないページに対するリクエストがあったときのエラーです。Ajaxで呼んでいる先は正しいでしょうか?ご確認ください、
atmn3356

2018/04/26 04:43

タグの追加致しました。ご指摘ありがとうございます。Ajaxで呼んでいる先は、自分が現在いるページ?のつもりなんですが、画面遷移せずにpost/getする場合どのように記述するのが良いのでしょうか・・・
HayatoKamono

2018/04/26 04:45

getのときも同様のエラーがでているのですか?postした時だけではなくて?
m.ts10806

2018/04/26 04:58

ajaxで処理をしたデータを元に画面遷移をlocationなどですることはあってもajax自身で画面遷移することはないと思います。ajaxはあくまで何かしらの処理だけをするためにパラメータを渡して処理した結果を受け取るものです。例えばサーバー側で入力チェックをさせるとか、削除処理をさせるとか、そういったことに使うものですね。フォーム情報を隠しておいて、表示非表示を切り替えるような仕組みになるのではないでしょうか?(Node.js環境を持っているわけではないので要件に合ってなかったらすみません)
HayatoKamono

2018/04/26 05:00

エラーの原因が掲載コード内にあるという確証をデバッグの結果によって得ている場合は別ですが、関連ファイルを含め、より広範囲のコードを質問文に掲載して下さい。掲載コード内にエラーの原因があることを切り分けが出来ている場合は、その根拠を質問文に掲載して下さい。
atmn3356
atmn3356

2018/04/26 05:06

HayatoKamono様、ご指摘ありがとうございます。追加でコードとエラー文を添付致します。
HayatoKamono

2018/04/26 05:20

上の方で質問したことが未回答なので、もう一度、質問しますね。「getのときも同様のエラーがでているのですか?postした時だけではなくて?」
atmn3356

2018/04/26 05:22

失礼しました。どちらも同様のエラーが出ます。
HayatoKamono

2018/04/26 05:34 編集

> ボタンを押下すると、 同じページに確認画面(入力内容)が表示されるという仕様にしたいです。 と、ありますが、今回の質問の範囲はalert()が実行されて表示されるまでで良いですよね? 割と回答するにはボリュームがあるので、必要であれば別質問に分けた方が回答者側の負担は減るので良いかと思います。入力された情報を表示する部分に関しての仕様詳細も質問文に載っていないことですし。
HayatoKamono

2018/04/26 05:30

あれ、404エラーが出るみたいなことが編集前にかかれていませんでしたでしょうか?それが今もなおそうであれば、詳細を交えて補足説明をお願いします。
atmn3356

2018/04/26 06:28

miyabi-san様の回答の通り修正したところ、正常に動きました。HayatoKamono様、ご指摘・アドバイス下さりありがとうございました。
HayatoKamono

2018/04/26 06:34

あ、解決となったのですね。ajax部分は引き続きこけそうですが。次回からは質問の範囲を明確にされると良いと思います。
guest

回答1

0

ベストアンサー

そもそもAjaxまでイケてません
これはJadeのコンパイルエラーなのでHTMLに変換出来ませんと騒いでいます。

具体的にはこの箇所。

Pug

1 script. 2 $('#form1').on('submit', function(event)

インデントラインが同一ですよね?

なのでscriptタグの中身には何もなしで流されています。
その後に$('#form1').on('submit', function(event)タグを生成しようとしていやそんなタグ作れないんだけど…エラー

Pug

1 script. 2 $('#form1').on('submit', function(event)

このようにインデントを1段階ネストしてから書き始めて下さい。

投稿2018/04/26 05:27

miyabi-sun

総合スコア21158

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

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

atmn3356

2018/04/26 06:32

ご回答ありがとうございます。 まさに、ご指摘の通りでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問