从 NodeJS 发送数据而不重新渲染整个页面?

问题描述 投票:0回答:3

我编写了一个非常简单的 Express NodeJS 应用程序,它从表单中的用户读取数据并将其发送到服务器。服务器执行一些操作并将新字符串返回到同一页面。但是,为了将新数据返回到当前加载的页面,我必须重新渲染页面。我只想通过从 Node js 发送字符串来更新字符串,而不是重新渲染整个页面。

我有以下问题:

  • 如何从NodeJS服务器发送数据而不需要重新渲染整个页面?
  • 为什么用

    Post
    方法发送数据,在
    req.body.XXX
    中提供数据,而用
    Get
    方法发送数据,为
    undefined
    返回
    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");
      });

    });
javascript node.js express
3个回答
1
投票

我建议使用像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>

0
投票

我知道这个问题很老了,但我认为这个简短的例子也可以帮助其他人。

我将通过元素的 ID 访问该元素并更改内部文本。

  1. HMTL-客户端:

    函数按钮SendStringFromInput(){ var string = document.getElementById("inputfield").innerText; socket.emit("getStringfromHTML", string); }

2.Node Express-服务器端:

socket.on("getStringfromHTML", (string) => { console.log(string);

// 字符串更改 var stringNew = ....

socket.emit("getNewString", stringNew); // 你的客户端重新渲染 无需重新加载页面

socket.broadcast.emit("getNewString", stringNew); // 重新渲染所有内容 连接到您页面的客户});

  1. HMTL-客户端:
socket.on("getNewString", (string) => { console.log(string); document.getElementById("inputfield").innerText = string; });

-2
投票

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

至于你的第二个问题,

req.body
仅填充了
POST
PUT
请求的数据。对于
GET
,您可以依赖
req.query
req.params
,具体取决于您如何组织 API 路由

© www.soinside.com 2019 - 2024. All rights reserved.