请教一个关于ajax的Nodejs问题

请教一个关于ajax的Nodejs问题

用express+ejs构建的页面，ajax的js文件连接到index.ejs中了，document.getElementById().onclick=function(){ var ajax=new xmlhttprequest(); ajax.onreadystatechange=function(){ alert(“ok”); } ajax.open(“get”,url,true); } 代码部分简写了，主要是想问url如何写，自己试了./ / /index ,node的控制台都没任何反应，问题可能说不是routes文件夹下的index.js中app.get("/",function(){render(index) } ),即使node重新渲染了index控制台也会有信息的，可是，点击ajax的按钮node不会有任何信息提示，所以以为是url的问题，请教一下大大，们，家里没网，到网吧手敲得


4 回复

当然可以！你提到的问题主要是关于 AJAX 请求的 URL 配置。在 Express 应用中，你需要确保 AJAX 请求能够正确地到达你的服务器端路由。以下是一个完整的示例，包括前端 AJAX 请求和后端 Node.js 路由处理。

前端代码（index.ejs）

首先，我们来看一下前端代码。假设你的项目结构如下：

project-root/
├── public/
│   └── js/
│       └── app.js
├── views/
│   └── index.ejs
└── routes/
    └── index.js

在 index.ejs 中引用 app.js 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
</head>
<body>
    <button id="myButton">Click Me!</button>

    <script src="/js/app.js"></script>
</body>
</html>

在 public/js/app.js 中编写 AJAX 请求代码：

document.getElementById('myButton').onclick = function() {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            alert("OK");
        }
    };

    // 这里是关键：URL 应该指向你的后端路由
    xhr.open("GET", "/data", true);
    xhr.send();
};

后端代码（index.js）

接下来，我们需要配置后端路由来处理 /data 请求。在 routes/index.js 文件中添加如下代码：

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

router.get('/data', function(req, res) {
    console.log('Data request received');
    res.json({ message: 'Hello from the server!' });
});

module.exports = router;

最后，在 app.js 中引入并使用这个路由：

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');

const app = express();

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 使用 body-parser 中间件
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

// 引入并使用路由
const indexRouter = require('./routes/index');
app.use('/', indexRouter);

// 渲染主页
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.get('/', function(req, res) {
    res.render('index');
});

// 启动服务器
const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

解释

  1. 前端代码：

    • 我们在 index.ejs 中引用了 app.js 文件。
    • 在 app.js 中，我们创建了一个 XMLHttpRequest 对象，并设置了一个回调函数来处理响应。
    • xhr.open("GET", "/data", true); 中的 /data 是请求的 URL，它应该与后端路由匹配。

  2. 后端代码：

    • 在 index.js 中定义了一个 GET 路由 /data，当客户端发送 GET 请求时，会调用这个路由处理函数。
    • 在 app.js 中引入并使用了 index.js 中定义的路由。

这样配置后，当你点击按钮时，AJAX 请求会被发送到 /data 路径，后端会接收到这个请求并返回 JSON 数据。


是有问题, ajax.send() 没写, 当然有问题… 我一般用 .onload 而不是 onreadystatechange, 比较短

谢谢啊，昨天通过alert（ajax.status+ajax.readystate）发现了，之前看文档说如果用get方法，send不会发送任何数据，所以就没写send；

在使用Express和EJS构建的页面中，如果你希望通过AJAX来访问某个路由，并且确保服务器端能够正确响应，那么你需要确保以下几个方面：

  1. URL路径：在ajax.open("GET", url, true)中，url应该指向你希望请求的后端API路径。例如，如果你有一个API位于/api/data，那么你应该这样设置URL：

    ajax.open("GET", "/api/data", true);

  2. 路由配置：确保在你的Express应用中已经定义了这个路由。比如，在你的routes/index.js文件中添加以下代码：

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

/* GET api data */
router.get('/api/data', function(req, res, next) {
    res.json({ message: 'Hello from API' });
});

module.exports = router;

  3. 应用路由：确保在主应用文件（通常是app.js或server.js）中引入并使用了上述路由配置：

    const indexRouter = require('./routes/index');

app.use('/api', indexRouter); // 注意这里指定了/api作为前缀

  4. 检查网络请求：在浏览器开发者工具的Network标签下，可以查看实际发出的请求以及服务器响应情况，这对于调试AJAX请求非常有用。

  5. 错误处理：确保你在服务器端正确处理了可能出现的错误。例如，在Express中间件中添加错误处理逻辑：

    app.use(function(err, req, res, next) {
    console.error(err.stack);
    res.status(500).send('Something broke!');
});

以上步骤应该可以帮助你解决通过AJAX请求与Node.js后端通信时遇到的问题。如果你按照上述指导仍然无法解决问题，请提供更详细的错误信息或代码片段，以便进一步诊断。

回到顶部