ノードjsからhtmlに変数を渡してページに表示するにはどうすればよいですか? 単純なメカニズムは何ですか? は、私が使用して簡単なto-doリストを開発しようとしていますノードのjsノードjsからhtmlにデータを渡す方法は?
答えて
2つのアプローチは、あなたがHTMLにノード(サーバ側)からのデータを表示するために使用することができますここにあります
は1 - あなたは、ファイルを作成することができますjsonでデータを返すノードでは、JQueryからこのページを呼び出して、HTMLの一部をAjaxで置き換えることができます。ノードJSで サンプルコード:
var usersFilePath = path.join(__dirname, 'users.min.json');
apiRouter.get('/users', function(req, res){
var readable = fs.createReadStream(usersFilePath);
readable.pipe(res);
});
Ajax呼び出し:
$.get("/users", function(data) {
$(".result").html(data);
alert("Load was performed.");
});
2 - あなたはジェイドと急行使用することができます(私は http://expressjs.com/をお勧めします)
ここでは、取得する方法についての私のブログですnode.jsで始まったClick Here nodej用のスターターキットを作成しました。興味があればClick Here
Expressはテンプレートエンジンではありません。テンプレートエンジンであるJadeを使用します。ハンドルバーまたはEJSを使用することもできます。 – Crowes
経路を確立し、res.send
メソッドを使用してhtmlコンテンツで応答します。 htmlコンテンツではes2015テンプレートを使用して、応答に変数を含めることができます。したがって、次のようになります。
const name = 'pradeep';
res.send(`hello ${name}`);
これを試してみてください。
次の関数は)
app.use('/*', function(req, res){
//sample binding data
var dataToBind = { 'msg' : 'You\'ve been logged out successfully.' , 'error' : 'The username and password that you entered don\'t match.' };
res.writeHead(200, {
"Content-Type": "text/html"
});
fs.readFile(__dirname + '/login.html', 'utf8' ,function(err, data) {
if (err) throw err;
data = doDataBinding(data,dataToBind);
res.write(data);
res.end();
});
}は次のように結合動的データを検証する
function doDataBinding(data, databindings){
for(var prop in databindings)
if(databindings.hasOwnProperty(prop))
data = data.split('${'+prop+'}').join(databindings[prop]);
return data;
}
サンプル要求はHTMLにダイナミックデータを結合します。
$ {msg}と$ {error}データバインディングを持つlogin.htmlを試してみてください。
あなたのコメントありがとう –
- 1. Ember-AjaxでノードJS Expressからデータを渡すには?
- 2. laravelからvue jsにデータを渡す方法は?
- 3. ノードJS + MongoDB - モデルからルートにデータを返す方法
- 4. ノードjs - http get要求からのトークンをHTMLページに安全に渡す方法は?
- 5. XSLT親ノードにデータを渡す方法
- 6. ノードJSのルータからビューにデータが渡されない
- 7. ノードJSでは、http.requestコールバックに変数を渡す方法は?
- 8. JSON形式のデータをWebViewからHTMLページに渡す方法
- 9. PHPアプリケーションからJSにデータを渡す正しい方法は何ですか?
- 10. AngularJs HTMLテンプレートにデータを渡す方法
- 11. Ajaxポストからノードjsへのデータの受け渡し
- 12. ノードjs ajaxコールへの応答として静的htmlにデータを渡す方法
- 13. HTML CSSとJSでAPIからデータを取得する方法
- 14. ノードJSからPHPへのPOSTデータの読み込み方法
- 15. html文字列からhtmlノードを作成する方法は?
- 16. JSONデータをノードjsスクリプトから別のサーバーのHTMLファイルに送信する方法
- 17. React Native JSコードにノード環境変数を渡す方法
- 18. ハンドルバーからブール値をノードに渡す方法は?
- 19. 1つのhtmlページから2番目のデータをPHPに渡す方法は?
- 20. HTMLからJSへのデータの受け渡し
- 21. HTMLからJSへのデータ値の受け渡し
- 22. ノード側からReact-componentにサーバー側のレンダリングでデータを渡す方法
- 23. ノードjsスクリプトをhtmlファイルに挿入する方法
- 24. ノードJS - HTMLパス
- 25. ノードjsとHTML:
- 26. jsからhtmlへのjsonレスポンスからデータを追加する方法
- 27. ノードからノードへのデータを投稿するjs route not working
- 28. ノードjsのJWTをバックエンドからフロントエンドに渡す
- 29. Angular jsで他のコントローラにデータを渡す方法は?
- 30. vbnetのhtmlノードからデータを取得
['express'](https://expressjs.com)のようなNode.jsベースのフレームワークを見てください – piotrbienias
[node.jsからhtmlに変数を渡す]可能な複製(http://stackoverflow.com)/questions/37991995/pass-a-variable-from-node-js-to-html) –
ああ...お元気ですか? –