使用nodejs更改html内的内容而不渲染页面

Just learning nodejs. I want to change content inside my html without completely rendering in the page when I post.

刚学习nodejs。我想在发布时更改我的html中的内容而不在页面中完全呈现。

Here is my current code.

这是我目前的代码。

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs')
var arr = [];

app.get('/', function (req, res) {
  res.render('index', {messages: null, error: null});
})

app.post('/user', function (req, res) {
        var input = req.body.userInput;
        var output = "";
        arr.push(input);
        for(var i = 0; i < arr.length;i++){
            (function(){
                console.log(arr[i]);
                output +=arr[i] + "</br>";
            })(i);
      }
      res.render('index', {messages: output, error: null});  
})


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

Thanks. Any advice is really appreciated.

谢谢。任何建议真的很感激。

2 个解决方案

#1

Send just the data:

只发送数据：

app.post('/user', function (req, res) {
        var input = req.body.userInput;
        var output = "";
        arr.push(input);
        for(var i = 0; i < arr.length;i++){
            (function(){
                console.log(arr[i]);
                output +=arr[i] + "</br>";
            })(i);
      }
      res.status(200).json({messages: output, error: null});//Not rendering new page, just sending data
})

In the front-end, handle as follows if you're using plain JS:

在前端，如果你使用普通JS，请按如下方式处理：

function handlePostUser() { // Invoke this on form-submit or wherever applicable
            var xhr = new XMLHttpRequest();
            xhr.open("POST", 'your link/user', true);
            xhr.setRequestHeader("Content-Type", "application/json");
            var payload = { data to post };
            xhr.send(payload);
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && !xhr.status) {
                    // Handle error
                    console.log("FAILED");
                } else if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log("SUCCESS");
                    //your logic to update the page. No reloading will happen
                }
            }
}

#2

You can't do that with server-side code.

您无法使用服务器端代码执行此操作。

You could have to write client-side JavaScript to manipulate the DOM of the existing page.

您可能必须编写客户端JavaScript来操作现有页面的DOM。

That JS could use Ajax to get fresh data from the server. You could either write client-side code to extract the portion you care about, or create a different server-side endpoint that only returns the bit of data you want.

JS可以使用Ajax从服务器获取新数据。您可以编写客户端代码来提取您关心的部分，也可以创建一个不同的服务器端端点，只返回您想要的数据位。

#1