jquery的ajax调用Nodejs后台报错的问题

jquery的ajax调用Nodejs后台报错的问题

当我前台用get的方式调用后台时,success内的代码被执行，当该用post时却执行了error内的代码。 可后台不管前台用哪种方式提交，都可以正常输出，代码如下： 前台： $.ajax({ url:“http://127.0.0.1:3000/getdata”, //url:“http://192.168.100.187:3000”, dataType:“jsonp”, jsonp:“callback”, data:{ name:“Persagy”, address:“Shang Di”, Boss:“Jiang Jiang” }, type:“post”, success:function(result){ alert(‘x’); alert(result); }, error:function(mess){ alert(‘error’); alert(mess); } });

后台： app.post(’/getdata’,function(req,res){ res.writeHead(200); res.send(queryObj.callback+’(’{“message”: “test”}’)’);*/ console.log(util.inspect(res)); var data=req.body; console.log(data); console.log(req.url); //res.send(util.inspect(data)); res.end(util.inspect(data)); });


6 回复

问题描述

在使用 jQuery 的 AJAX 调用 Node.js 后端服务时，发现当使用 GET 方法请求时，success 回调函数能够正常执行。然而，当尝试使用 POST 方法时，请求却进入了 error 回调函数，尽管后端服务能够正确处理请求并返回数据。

问题分析

这个问题可能与几个因素有关：

  1. Content-Type: 使用 POST 请求时，默认情况下 jQuery 发送的数据格式为 application/x-www-form-urlencoded，这可能需要在服务器端进行相应的解析。
  2. JSONP 限制: dataType: "jsonp" 仅适用于 GET 请求，因为 JSONP 是一种通过 <script> 标签加载数据的机制，不支持 POST 请求。
  3. CORS (跨源资源共享): 如果前端和后端不在同一个域，可能需要配置 CORS 来允许跨域请求。

解决方案

1. 移除 JSONP

既然你使用的是 POST 请求，应移除 dataType: "jsonp"。你可以直接使用默认的 json 类型，或者根据实际需求选择其他类型。

$.ajax({
    url: "http://127.0.0.1:3000/getdata",
    // url: "http://192.168.100.187:3000",
    dataType: "json",  // 移除 jsonp
    data: {
        name: "Persagy",
        address: "Shang Di",
        Boss: "Jiang Jiang"
    },
    type: "post",
    success: function(result) {
        alert('x');
        alert(result);
    },
    error: function(mess) {
        alert('error');
        alert(mess);
    }
});

2. 配置 Node.js 后端

确保后端能够正确解析 POST 请求体中的数据。可以使用中间件如 body-parser 来解析请求体。

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

const app = express();

// 使用 body-parser 中间件来解析 POST 数据
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.post('/getdata', function(req, res) {
    console.log(req.body);  // 输出请求体中的数据
    res.status(200).json({ message: "test" });
});

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

总结

通过以上修改，你应该能够解决使用 POST 方法调用 Node.js 后端时遇到的错误。确保前端发送的数据格式与后端期望的格式一致，并且正确配置了后端以解析这些数据。


没人吗 ？ 自己顶！

是不是跨域访问的问题 用浏览器调试一下看看有什么出错信息

是跨域的问题，已经搞好了，谢谢哥们！

怎么搞定的，分享下呗

从你提供的信息来看，问题可能出在以下几个方面：

  1. 请求类型不匹配：你在前端使用 dataType: "jsonp"，但是 JSONP 是一种特殊形式的 AJAX 请求，主要用于跨域请求。它要求服务器返回一段 JavaScript 代码，而不是普通的 JSON 数据。而你在 Node.js 后端直接处理了一个普通的 POST 请求。

  2. 数据格式问题：由于 jQuery 的 dataType: "jsonp" 选项，jQuery 会尝试通过 JSONP 来发送请求，但你的后端代码并没有正确处理 JSONP 的响应。你需要根据实际需求决定是否使用 JSONP，或者改为普通 AJAX 请求。

示例解决方案

假设你希望使用普通的 AJAX POST 请求：

前端代码修改

移除 dataType: "jsonp"，改为 contentType: 'application/json'，并使用 JSON.stringify 将数据转换为 JSON 字符串。

$.ajax({
    url: "http://127.0.0.1:3000/getdata",
    // url: "http://192.168.100.187:3000",
    contentType: 'application/json',
    data: JSON.stringify({
        name: "Persagy",
        address: "Shang Di",
        Boss: "Jiang Jiang"
    }),
    type: "POST",
    success: function(result) {
        alert('success');
        alert(JSON.stringify(result));
    },
    error: function(mess) {
        alert('error');
        alert(mess.responseText);
    }
});

后端代码修改

确保你的 Node.js 服务器能够正确解析 JSON 请求体，并发送 JSON 响应。

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

app.use(bodyParser.json());

app.post('/getdata', (req, res) => {
    console.log(req.body);
    console.log(req.url);

    const response = {
        message: "test"
    };

    res.status(200).json(response);
});

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

总结

  1. 移除 dataType: "jsonp"，改为 contentType: 'application/json'。
  2. 使用 JSON.stringify 将数据转换为 JSON 字符串。
  3. 确保后端能够正确解析 JSON 并发送 JSON 响应。

以上修改应该能解决你遇到的问题。

回到顶部