如何在不重新渲染整个页面的情况下从NodeJS发送数据？

Question

如何在不重新渲染整个页面的情况下从NodeJS发送数据？

3

我已经编写了一个相当简单的Express NodeJS应用程序，该程序从用户在表单中输入的数据中读取并发送到服务器。服务器执行一些操作，并将新字符串返回给同一页。但是为了将新数据返回到当前加载的页面，我必须重新渲染页面。我想通过从Node JS发送字符串来更新字符串，而不是重新渲染整个页面。

我有以下问题：

How to send data from NodeJS server without re-rendering the whole page?

Why does sending data with Post method, provides data in req.body.XXX but sending data with Get method, returns undefined for req.body.XXX.

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

    <form id="myForm" action = "http://localhost:3000/testing" method="post"> 
      Enter Url: <input type="text" name="urlEditText"/>
      <br />
      <br />
      Shortened Url:<%= shortenedUrl %> 
      <br />
      <br />
      <input id="myButton" type="button" value="Submit" />
     </form>
    </body>
 </html>

index.js:

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express', shortenedUrl: ''});
    console.log("hello inside index.js method 0");
});


// passing an updated string back to the page
router.post('/yolo', function(req, res, next) {
    res.render('index', { title: 'NewTitle', shortenedUrl: req.body.urlEditText});
    console.log("hello inside index.js method 1");
});

编辑：

JQuery提交脚本：

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

      event.preventDefault();
      $("#myForm").submit(function() {
         document.write("button clicked calling yolo script");
      });

      $.post('/yolo', function() {
        document.write("button clicked calling yolo script");
        alert("yolo");
      });

    });

- user2498079

你难道不只是在寻找常规的 Ajax 吗？ - adeneo

此外，对于 GET 请求，数据位于 req.query 中。 - adeneo

1

尝试将socket.io添加到您的应用程序中。它提供了向客户端发送数据的最简单方式，而无需从客户端发出多个请求。 - Pradeep Potnuru

@adeneo 原谅我在Web开发方面的无知，但我认为ajax是用于客户端的。那么我该如何使用ajax将数据从服务器发送到客户端呢？ - user2498079

你正在将表单数据提交到服务器，服务器对数据进行处理并在新页面中返回。这就是ajax发挥作用的地方，它是其预期用途的精确案例，从客户端发送数据，返回该请求的数据等。或者你需要随机地将数据从服务器推送到客户端，而不需要客户端请求。 - adeneo

显示剩余9条评论

2个回答

-2

res.render 仅用于渲染页面。在您的情况下，您很可能需要 res.json({title: 'newTitle', ...})

至于您的第二个问题，req.body 仅在 POST 和 PUT 请求中填充数据。对于 GET 请求，您可以依靠 req.query 或 req.params，具体取决于您如何组织 API 路由。

- Yerken

第二个参数可能是用于模板化，例如EJS，并且与JSON无关。 - adeneo

他想要在不重新渲染页面的情况下更新字符串，因此需要进行ajax请求，并且响应应以JSON（或其他格式）的形式进行。他没有询问“ajax”，而是询问如何从服务器发送数据回来。 - Yerken

而 res.render 以与 res.json 完全相同的方式发送数据，后者只添加一组标题并对对象进行字符串化，但您正在查看的对象用于模板，会传递到模板等。当进行同源 ajax 调用时，返回什么并不重要，JSON 是一个很棒的数据格式，但它也可以是 HTML 或中文诗歌。 - adeneo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user3618473 · Accepted Answer

我建议使用像socket.io这样的东西，这样你就可以在不重新加载页面的情况下发送和接收来自服务器的数据。以下是他们网站上的一个简单示例：

服务器（app.js）

var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs');

app.listen(80);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

客户端（index.html）

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>