Question

我有以下快递应用，只需呈现 sample.ejs 页面。在该页面上，当我按下按钮时，附加的脚本将div文本更改为 “这是来自J QUERY。我希望同样的事情发生但我希望数据来自数据库。在我的快递应用程序中，如果我每次尝试使用 res.render（）; 我点击按钮然后重新加载我不想要的页面。所以有没有办法实现这一点而无需重新加载页面，只更新页面的一部分？我搜索了堆栈溢出和网络，但无法得到一个合适的答案，或者我可能无法理解。我知道这是一个非常基本的问题。

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

<!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>

现在这就是我想做的事情

<!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>

注意：我不是问如何查询数据库

-Thanks

Answer 1

您必须在后端定义和终止返回您要显示的信息：

<强> 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'
     });
});

然后在你的前端你需要调用api端点，如：

<强> 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>

您可以使用jquery here找到有关ajax调用的更多信息。

但是我建议你使用像angular或react这样的任何框架，以便更容易在html中渲染数据，否则你将不得不使用jquery编写大量代码。

使用NODE.JS和EJS

1 个答案: