2017-06-08 15 views
0

node.jsを使い始めたばかりなので、私はいくつかのことをほとんど理解できません。だから意味しないでください。あまり結果を出さずにウェブを検索しようとしました。nodejsアプリがポストからデータを受け取り、htmlにレンダリング

私は1つのWebページを投稿待ちにして、受信したデータをレンダリングします。 は、これまでのところ、私は

html 
    head 
     title = title 
    body 
     h1 = message 

を持っていると私はcurl --data "field=value" http://127.0.0.1:8081/ をトリガーするたびに、私は、端末内の受信ポストを見ることができますが、私はunderstendすることはできません、次のapp.jsにviews/index.pug

var express = require('express'); 
    var bodyParser = require('body-parser'); 
    var app = express(); 
    app.use(bodyParser.json()); // for parsing application/json 
    app.use(bodyParser.urlencoded({ extended: true })); // for parsing 
    application/x-www-form-urlencoded 

    app.set('view engine', 'pug'); 

    app.get('/', function (req, res) { 
    res.render('index', {title: 'GET test',message : 'GET test'}); 
    }); 

    var data = ""; 

    app.post("/",function(req, res) { 

    console.log(req.method); 
    console.log(req.headers); 
    console.log(req.url); 
    data=req.body 
    console.log(data); 
    res.render('index', {title: 'POST test',message : 'POST test'}); 

    }); 



    app.listen(8081, function() { 
     console.log('Example app listening on port 8081!'); 
    }); 

を持っていましたこのデータをページにレンダリングする方法。あなたのようなPOST実行時のdataresponses送信する必要が

答えて

0

:あなたのJavascript呼び出し内で、その後

res.status(201).send("POST executed successufully"); 

を。 POSTレスポンスをキャッチし、次のようなものでレンダリングします。

$.ajax({ 
    success: function(data, textStatus, xhr) { 
     console.log(xhr.status); 
    }, 
    complete: function(xhr, textStatus) { 
     console.log(xhr.status); 
    } 
}); 
+0

ありがとうございます。私はアヤックスコードをどこに置くのですか? – user32185

+0

Ajaxコードはhtml/JSパート(フロントエンド)にあります。ツアーWebサービスを使用します – aorfevre

0

res.renderメソッドにデータを渡していないかのように見えます。

console.log(data); 
res.render('index', {title: 'POST test',message : 'POST test', postData: data}); 

html 
head 
    title = title 
body 
    h1 = message 
    span = postData.field 

^これは仮定「フィールドが」あなたはより動的な方法でこれを行うと、それが存在することを確認したいと思います実際には、記事の本文中に存在しているの下にあります。

+0

ありがとうございます。私の問題は、ページが変わらないということです。投稿を受け取るたびに「投稿後のテスト」を表示するようなものを作りたいと思っています。 – user32185

関連する問題