使用NODE.JS和EJS更新HTML页面的一部分
[英]Update part of HTML page using NODE.JS and EJS
问题描述
I have the following express app which just renders the sample.ejs page. 
我有以下快递应用程序，仅渲染sample.ejs页面。 On that page when I press the button the attached script changes the div text to "THIS IS FROM J QUERY. I want the same thing to happen but I want the data to be coming from a database. In my express app if I try to use res.render(); every time I click the button then it reloads the page which I don't want. So is there a way to achieve this without reloading page and only update part of page? I have searched stack overflow and the web but can't get an appropriate answer or maybe I just am unable to understand. I know this is a very basic thing to ask. 在该页面上，当我按下按钮时，附加的脚本将div文本更改为“ THIS IS FROM J QUERY。我希望发生同样的事情，但是我希望数据来自数据库。如果我尝试在快速应用程序中使用res.render（）;每次我单击按钮，它都会重新加载不需要的页面，那么有没有一种方法可以不重新加载页面而只更新页面的一部分呢？网络，但无法获得适当的答案，或者我只是听不懂，我知道这是非常基本的问题。
APP.js APP.js
var express = require('express');
var app = express();
app.use(express.static('public'));
app.use(express.static('./src/views'));
app.set('views', './src/views');
app.set('view engine' , 'ejs');
app.listen(3000 , (err)=>{console.log('Listening')});
app.get('/' , function(req , res) {
res.render('sample' , {result_from_database: res.body} );
});
sample.ejs sample.ejs
<!doctype html>
<html lang="en">
<head>
<title>Sample HTML File</title>
</head>
<body>
<div id="holder">
WELCOME
</div>
<form>
<button type="button" id="HButton"> HELLO </button>
</form>
</body>
<script>
$(document).ready(function () {
var form = $("#holder");
$("#HButton").on("click", function () {
form.html("THIS IS FROM J QUERY");
});
});
</script>
<script src="/lib/jquery/dist/jquery.js"></script>
</html>
Now this is what I want to do 现在这就是我要做的
<!doctype html>
<html lang="en">
<head>
<title>Sample HTML File</title>
</head>
<body>
<div id="holder">
<%= result_from_database %>
</div>
<form>
<button type="button" id="HButton"> HELLO </button>
</form>
</body>
<script>
$(document).ready(function () {
var my_div = $("#holder");
$("#HButton").on("click", function () {
/* Tell app.js that I clicked a button and then app.js
query the database and using ejs or something else update the
my_div inner html with the database result without
reloading page */
});
});
</script>
<script src="/lib/jquery/dist/jquery.js"></script>
</html>
NOTE: I'm not asking how to query the database 注意：我不是在问如何查询数据库
-Thanks -谢谢
1 个解决方案
解决方案1
6 已采纳 2017-04-20 15:30:09
You have to define and endpoint in your back end that return the information you want to display: 您必须在后端定义并终结点，以返回要显示的信息：
app.js app.js
var express = require('express');
var app = express();
app.use(express.static('public'));
app.use(express.static('./src/views'));
app.set('views', './src/views');
app.set('view engine' , 'ejs');
app.listen(3000 , (err)=>{console.log('Listening')});
app.get('/' , function(req , res) {
res.render('sample' , {result_from_database: res.body} );
});
app.get('/api/books', function(req, res) {
res.json({
message: 'Your database information'
});
});
then on your front end you need to make a call to api endpoint like: 然后在前端，您需要调用api端点，例如：
sample.ejs sample.ejs
<script>
$(document).ready(function () {
var my_div = $("#holder");
$("#HButton").on("click", function () {
$.ajax({
url: "/api/books"
})
.done(function( data ) {
console.log( "Sample of data:", data );
$('#holder').html(data.message);
});
});
});
</script>
You can find more information on ajax call with jquery here . 您可以在此处找到有关使用jquery进行ajax调用的更多信息。
However i would suggest you to use any framework like angular or react to make it easier to render the data in your html, otherwise you will have to write a lot of code using jquery. 但是我建议您使用任何框架，例如angular或react，以使其更易于呈现html中的数据，否则您将不得不使用jquery编写大量代码。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.