Javascript 从NodeJ发送数据而不重新呈现整个页面?

Javascript 从NodeJ发送数据而不重新呈现整个页面?,javascript,node.js,express,Javascript,Node.js,Express,我编写了一个非常简单的Express NodeJS应用程序,它从表单中的用户读取数据并发送到服务器。服务器执行一些操作并将新字符串返回到同一页。但是,为了将新数据返回到当前加载的页面,我必须重新呈现页面。我只想通过从节点js发送一个字符串来更新它,而不是重新呈现整个页面 我有以下问题: 如何在不重新呈现整个页面的情况下从NodeJS服务器发送数据 为什么使用Post方法发送数据时,会在req.body.XXX中提供数据,而使用Get方法发送数据时,会为req.body.XXX返回未定义的 &

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

我有以下问题:

  • 如何在不重新呈现整个页面的情况下从NodeJS服务器发送数据
  • 为什么使用
    Post
    方法发送数据时,会在
    req.body.XXX
    中提供数据,而使用
    Get
    方法发送数据时,会为
    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>
    
    编辑:

    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");
    });
    
     $(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");
          });
    
        });
    
    JQuery提交脚本:

    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");
    });
    
     $(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");
          });
    
        });
    

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


    至于你的第二个问题,
    req.body
    只填充了
    POST
    PUT
    请求的数据。对于
    GET
    ,您可以依赖
    req.query
    req.params
    ,这取决于您组织API路由的方式

    我建议使用socket.io之类的工具,这样您就可以在不重新加载页面的情况下从服务器发送和接收数据。以下是他们网站上的一个简单示例:

    服务器(app.js)

    客户端(index.html)

    
    变量套接字=io('http://localhost');
    socket.on('news',函数(数据){
    控制台日志(数据);
    emit('my other event',{my:'data'});
    });
    
    您不是在寻找常规ajax吗?另外,对于
    GET
    请求,数据位于
    req.query
    中,请尝试将socket.io添加到应用程序中。它提供了向客户端发送数据的最简单方法,而无需客户端多次请求。@请原谅我在web开发方面的无知,但我认为ajax适合客户端。那么,我如何使用ajax将数据从服务器发送到客户端呢?当您从表单向服务器提交数据时,服务器会处理数据并在新页面中返回数据。这就是ajax的用武之地,它正是它所要使用的用例,从客户端发送数据,将数据返回到该请求等。或者您是否需要在客户端不要求的情况下将数据从服务器随机推送到客户端。第二个参数可能是模板,如EJS,与JSON无关?他希望在不重新呈现页面的情况下更新字符串,因此需要发出ajax请求,并以JSON(或其他格式)的形式进行响应。他没有问关于
    ajax
    ,他问如何从服务器发回数据,
    res.render
    以与
    res.json
    完全相同的方式发回数据,后者只添加一组头并字符串化对象,但您看到的对象用于模板化,它被传输到模板等。当进行同源ajax调用时,返回什么并不重要,JSON是一种很好的数据格式,但也可以是HTML或中文诗歌。