关于ajax的页面跳转问题 Nodejs 环境下如何处理

关于ajax的页面跳转问题 Nodejs 环境下如何处理

今天开始新一轮的小项目自娱自乐了，中途遇到个问题，简单说是这样的，我在页面A通过ajax的post方法传递了一个name值给后台，后台再将name的值返给页面B，并在页面B上显示出来。现在后台已经去到name的值了，关键返值出现问题了，我原来的思路是这样的。 在后台通过res.render(‘页面名’,{name: name})这样的方法给模板页的，页面上通过<%= name %>显示出来，可是res.render貌似无法将将值传递过去？终端页不报错

7 回复

关于AJAX的页面跳转问题 Node.js环境下如何处理

在Web开发中，使用AJAX进行异步数据交互是非常常见的场景。你提到的问题是在一个页面（页面A）通过AJAX POST请求传递一个name值给后台，后台接收到该值后，想将其返回并展示在另一个页面（页面B）上。但是遇到了一些困难。

解决方案

  1. 前端部分：你需要确保你的AJAX请求成功发送并且能够接收到后台的响应。通常情况下，你可以在AJAX成功回调中进行页面跳转，并将数据作为参数传递给新的页面。

  2. 后台部分：后台需要正确地处理前端发来的请求，并返回相应的数据。然后你可以通过前端跳转时携带的数据来动态渲染页面。

示例代码

前端代码
<!-- 页面A -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面A</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="sendData">发送数据</button>

    <script>
        $(document).ready(function() {
            $('#sendData').click(function() {
                var name = 'John Doe'; // 这里可以替换为实际需要传递的值

                $.ajax({
                    url: '/submitName',
                    type: 'POST',
                    data: { name: name },
                    success: function(response) {
                        window.location.href = `/pageB?name=${encodeURIComponent(name)}`;
                    },
                    error: function() {
                        alert('请求失败');
                    }
                });
            });
        });
    </script>
</body>
</html>
后台代码（Node.js + Express）
const express = require('express');
const app = express();
app.use(express.json());

// 处理POST请求
app.post('/submitName', (req, res) => {
    const name = req.body.name;
    console.log(`接收到的名字: ${name}`);
    
    // 可以在这里处理其他逻辑，例如保存到数据库等
    res.status(200).json({ message: '名字接收成功' });
});

// 渲染页面B
app.get('/pageB', (req, res) => {
    const name = decodeURIComponent(req.query.name);
    res.render('pageB', { name });
});

// 启动服务器
app.listen(3000, () => {
    console.log('服务器启动在 http://localhost:3000');
});
模板文件（EJS）
<!-- views/pageB.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面B</title>
</head>
<body>
    <h1>欢迎，<%= name %>!</h1>
</body>
</html>

总结

通过上述代码，前端通过AJAX发送数据给后台，后台处理完成后返回成功的响应，并通过URL参数的方式将数据传递给页面B。页面B接收这些参数并通过模板引擎（如EJS）动态渲染页面内容。这种方式既实现了异步数据交互，也保证了页面的动态渲染。


你这样render只能传回，发起请求的页面, 也就是A页面。如果想要B页面显示出来，你得先把a传到后台的值存起来，然后在b页面通过ajax轮询（或者其他的办法） 时时显示name值。

感谢你的回答，鉴于render只能传回，我先在页面A拿到name值，通过location.href的方式手动拼页面B的url传到后台，后台取到值，再通过render返回页面B(这种方法有点笨，不过可以实现功能，先用着，有更好方法的朋友也可以分享分享)。不过，你的方法我也学习了，再一次谢谢你的回复

//如果是你描述的需求额的话，那就可以直接在后台跳转到B页面呀。
...
res.redirect('http://b.page/?name=req.body.name');

maybe~ :)

ajax 就是为了发送请求后让页面不跳转也能看到结果. 你说的 A 页面发请求 B 页面显示结果指的是类似实时聊天的功能么?

做.net项目时，ajax可以跳进后台的指定control里，完成页面的跳转，聊天功能的话，没做过，不太清楚呀

在Node.js环境下使用AJAX进行页面跳转和数据传递时，res.render方法主要用于服务器端渲染模板，它并不是用来直接返回AJAX请求的数据。对于你的需求，可以考虑以下几种方法来处理：

  1. API返回数据：

    • 你可以创建一个API路由来接收POST请求并返回数据，然后在AJAX成功回调中处理这些数据。

    示例代码：

    // server.js (Express应用)
app.post('/get-name', (req, res) => {
  const name = req.body.name;
  res.json({ name });  // 返回JSON格式数据
});

    在前端，你可以这样调用：

    fetch('/get-name', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'yourName' })
}).then(response => response.json())
  .then(data => {
    console.log(data.name);  // 这里处理返回的名字
    document.getElementById('display-name').innerText = data.name;
  });

  2. 重定向页面并传递数据： 如果你希望通过AJAX请求后跳转到另一个页面并在该页面显示数据，可以先将数据保存到session或数据库，然后在新的页面通过查询参数或URL路径传递数据。

    示例代码：

    • 保存数据到session:
      app.post('/save-name', (req, res) => {
  req.session.name = req.body.name;
  res.redirect('/pageB');
});
    • 在pageB页面获取并显示数据:
      // pageB.ejs 或其他模板文件
<h1>Hello, <%= session.name || '' %>!</h1>

以上两种方法可以根据实际需求选择使用。第一种方法适用于前后端分离场景，第二种方法适用于需要跳转页面的场景。

回到顶部