Question

如何在不重新加载整个页面的情况下更新ejs对象？我通过jquery从服务器获取数据，但是我不知道如何更新title对象，在ejs模板中将Express更改为NewTitle。另外，如果有人知道一个好的资源可以帮助快速Nodejs的初学者，请提及它。

index.ejs：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1 id="pageTitle"><%= title %></h1>
    <p>Welcome to <%= title %></p>

    <script type = "text/javascript"
            src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script type = "text/javascript" language = "javascript">
      $(document).ready(function() {

      $(document).ready(function() {
        $("#myButton").bind('click', function() {

          event.preventDefault();
          var data = $('#myEditText').val();
          var result = $.post('/yolo', {textBoxValue: data}, function(callback) {
            alert("data: "+ callback.title);
              $(document).ready(function(){
                  title = callback.title;
              });
          });

        });
      });

    </script>
  </body>
</html>

index.js：

router.post('/yolo', jsonParser, function(req, res, next) {

    res.send('index', { title: 'NewTitle'})
    console.log("hello inside index.js method 1");
});

Answer 1

你不能通过Jquery更新Ejs变量，你应该使用这样的东西：

HTML

<p>Welcome to <span class="title"><%= title %></span></p>

JS：

[...]
var result = $.post('/yolo', {
    textBoxValue: data
}, function(callback) {
    alert("data: " + callback.title);
    $(document).ready(function() {
        $('.title').html(callback.title);
    });
});
[...]

您必须在Node.js中使用res.json({title: 'NewTitle'})而不是res.send()

更新html值而不重新加载页面

1 个答案: