Nodejs 与 jquery ajax 回调错误

Nodejs 与 jquery ajax 回调错误

response.writeHead(200);
response.end(‘登陆成功！’);

jquery ajax 服务器返回都是正常的 为什么跳到error回调去了 搞了半天了怎么都搞不清楚

5 回复

Node.js 与 jQuery AJAX 回调错误

在使用 Node.js 和 jQuery AJAX 进行前后端交互时，有时会遇到回调函数错误的问题。例如，即使服务器返回的状态码为 200，AJAX 请求仍然进入 error 回调而不是 success 回调。

示例代码

首先，我们来看一下 Node.js 端的代码：

const http = require('http');

const server = http.createServer((req, res) => {
    if (req.method === 'POST' && req.url === '/login') {
        res.writeHead(200, { 'Content-Type': 'text/plain' });
        res.end('登陆成功！');
    } else {
        res.writeHead(404);
        res.end('Not Found');
    }
});

server.listen(3000, () => {
    console.log('Server running at http://localhost:3000/');
});

这段代码创建了一个简单的 HTTP 服务器，当接收到 POST 请求并访问 /login 路径时，它会返回状态码 200 和文本 “登陆成功！”。

接下来，我们看一下前端的 jQuery AJAX 请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="loginBtn">Login</button>

    <script>
        $(document).ready(function() {
            $('#loginBtn').click(function() {
                $.ajax({
                    url: 'http://localhost:3000/login',
                    method: 'POST',
                    success: function(response) {
                        console.log('Success:', response);
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', xhr.status, error);
                    }
                });
            });
        });
    </script>
</body>
</html>

在这个示例中，点击按钮会触发一个 AJAX 请求，发送一个 POST 请求到 http://localhost:3000/login。如果服务器返回状态码 200，应该进入 success 回调；如果返回其他状态码，则进入 error 回调。

可能的原因及解决方案

  1. 响应类型不匹配：

    • 如果服务器返回的内容类型与预期不符（例如，服务器返回 JSON 数据但客户端期望纯文本），jQuery 可能会进入 error 回调。
    • 解决方法：确保服务器和客户端的响应类型一致。例如，如果服务器返回 JSON，客户端应设置 dataType: 'json'。
    $.ajax({
    url: 'http://localhost:3000/login',
    method: 'POST',
    dataType: 'json', // 明确指定响应类型
    success: function(response) {
        console.log('Success:', response);
    },
    error: function(xhr, status, error) {
        console.error('Error:', xhr.status, error);
    }
});

  2. 跨域问题：

    • 如果前端页面和后端服务器不在同一个域名下，可能会遇到跨域问题。
    • 解决方法：在 Node.js 服务器上添加 CORS 头。
    const cors = require('cors');
const app = express();
app.use(cors());

通过以上步骤，你应该能够解决 Node.js 与 jQuery AJAX 回调错误的问题。


= =求救

。。咋没人 没人遇到过么

真坑爹 原来是因为我ajax写的json类型 返回值是string 还是不写类型的好。。

从你的描述来看，问题可能出在响应头（response.writeHead(200)）的设置上。通常情况下，如果服务器返回的状态码是200（表示请求成功），jQuery AJAX应该会进入success回调函数，而不是error回调函数。

可能的原因及解决方法：

  1. 检查状态码：

    • 确保服务器返回的状态码确实是200。有时候服务器可能会返回非200的状态码（如404、500等），这会导致AJAX请求失败。

  2. 响应格式：

    • 如果服务器返回的数据格式不正确（例如，不是预期的JSON格式），也可能导致AJAX请求进入error回调函数。

  3. 网络问题或CORS问题：

    • 网络延迟或跨域资源共享（CORS）配置不当也可能导致AJAX请求失败。

示例代码

Node.js 服务器端代码

const http = require('http');

const server = http.createServer((req, res) => {
    // 设置响应头
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('登陆成功！');
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

jQuery AJAX 客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="loginButton">登录</button>

    <script>
        $(document).ready(function() {
            $('#loginButton').click(function() {
                $.ajax({
                    url: 'http://localhost:3000',
                    method: 'GET',
                    success: function(response) {
                        console.log('登录成功:', response);
                    },
                    error: function(xhr, status, error) {
                        console.error('登录失败:', xhr.status, error);
                    }
                });
            });
        });
    </script>
</body>
</html>

解释

  • Node.js 服务器端：使用res.writeHead(200, { 'Content-Type': 'text/plain' })来确保响应头正确设置，并且返回一个简单的文本响应。
  • jQuery AJAX 客户端：使用$.ajax()发送请求到服务器，并根据服务器返回的状态码决定是否进入success或error回调函数。

通过上述示例代码，你可以测试并确认是否是因为状态码或其他原因导致AJAX请求进入error回调函数。

回到顶部