个人中心
gpt4 book ai didi

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

转载 作者：搜寻专家 更新时间：2023-11-01 00:09:33 25 4
gpt4 key购买 nike

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

我有以下问题:

  • 如何从 NodeJS 服务器发送数据而不重新渲染整个页面？

  • 为什么用Post方法发送数据，在req.body.XXX中提供数据，但是用Get方法发送数据，为 req.body.XXX 返回 undefined。

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

    });

最佳答案

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

关于javascript - 从 NodeJS 发送数据而不重新渲染整个页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34697834/

25 4 0
文章推荐： javascript - 无法在本地获取/冷却 Heroku nodejs 教程
文章推荐： php - 无法使用 gmail SMTP 在 Zend 中发送电子邮件。收到 fatal error : Uncaught exception 'Zend_Mail_Protocol_Exception' . 如何解决？
文章推荐： php - 我需要的数组排列
文章推荐： node.js - 如何为两个客户调用一次 Meteor 方法？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com