質問編集履歴

2 ソースコード、エラーコードの追記

atmn3356

atmn3356 score 147

2018/04/26 14:12  投稿

Ajaxで画面遷移させずに入力文字を出力
### 前提・実現したいこと
Expressを使用して、簡単な入力フォームを作ろうと考えています。
jadeページ上のフォームに必要事項を入力し、ボタンを押下すると、
同じページに確認画面(入力内容)が表示されるという仕様にしたいです。
ajaxを用いて画面遷移せずに行いたいのですが、
node.jsもajaxも未経験の為、コードがなかなか通りません。
おそらく凡ミスだと思うのですが…ご教示願います。
### 発生している問題・エラーメッセージ
```
Error:unexpected text
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'),
```
### 該当のソースコード
```jade
```index.jade
extends layout
block content
   tr
       th
           h1= title
           form(id="form1",action="/", method="post")
               input(name='username' , type="text")
               input(type="submit", value="実行")
           script.
           $('#form1').on('submit', function(event)
           {
               event.preventDefault();
               $.post(
                   $(this).attr('action'),
                   $(this).serializeArray(),
                   function(result) {
                       alert('アラート');
                   },
                   'json'
               );
           });
```
```javascript
```index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
 res.render('index', { title: 'Express' });
});
router.post('/', function(req, res){
   var result = {
       username: req.body.username
   };
   res.render('index', index);
});
```
```app.js  
var createError = require('http-errors');  
var express = require('express');  
var path = require('path');  
var cookieParser = require('cookie-parser');  
var logger = require('morgan');  
 
var indexRouter = require('./routes/index.js');  
var usersRouter = require('./routes/users.js');  
 
var app = express();  
 
// view engine setup  
app.set('views', path.join(__dirname, 'views'));  
app.set('view engine', 'jade');  
 
app.use(logger('dev'));  
app.use(express.json());  
app.use(express.urlencoded({ extended: false }));  
app.use(cookieParser());  
app.use(express.static(path.join(__dirname, 'public')));  
 
app.use('/', indexRouter);  
app.use('/users', usersRouter);  
 
// catch 404 and forward to error handler  
app.use(function(req, res, next) {  
 next(createError(404));  
});  
 
// error handler  
app.use(function(err, req, res, next) {  
 // set locals, only providing error in development  
 res.locals.message = err.message;  
 res.locals.error = req.app.get('env') === 'development' ? err : {};  
 
 // render the error page  
 res.status(err.status || 500);  
 res.render('error');  
});  
 
module.exports = app;  
 
```  
### 試したこと
Ajaxの実装方法をいくつか試しましたが、
いずれも404エラーとなりました。
いずれもエラーとなりました。
  • HTML

    11489 questions

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

  • CSS

    7545 questions

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

  • Ajax

    1327 questions

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

  • Node.js

    2360 questions

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

  • jade

    37 questions

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

1 タグの追加

atmn3356

atmn3356 score 147

2018/04/26 13:41  投稿

Ajaxで画面遷移させずに入力文字を出力
### 前提・実現したいこと
Expressを使用して、簡単な入力フォームを作ろうと考えています。
jadeページ上のフォームに必要事項を入力し、ボタンを押下すると、
同じページに確認画面(入力内容)が表示されるという仕様にしたいです。
ajaxを用いて画面遷移せずに行いたいのですが、
node.jsもajaxも未経験の為、コードがなかなか通りません。
おそらく凡ミスだと思うのですが…ご教示願います。
### 発生している問題・エラーメッセージ
```
Error:unexpected text
```
### 該当のソースコード
```jade
extends layout
block content
tr
th
h1= title
form(id="form1",action="/", method="post")
input(name='username' , type="text")
input(type="submit", value="実行")
script.
$('#form1').on('submit', function(event)
{
event.preventDefault();
$.post(
$(this).attr('action'),
$(this).serializeArray(),
function(result) {
alert('アラート');
},
'json'
);
});
```
```javascript
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.post('/', function(req, res){
var result = {
username: req.body.username
};
res.render('index', index);
});
```
### 試したこと
Ajaxの実装方法をいくつか試しましたが、
いずれも404エラーとなりました。
  • HTML

    11489 questions

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

  • CSS

    7545 questions

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

  • Ajax

    1327 questions

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

  • jade

    37 questions

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

  • JavaScript

    20401 questions

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

  • Node.js

    2360 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る