首页 文章

对Express应用程序的Ajax调用不传递数据

提问于
浏览 次
1

我正在使用React和Express构建应用程序 . 从React组件我调用一个针对某个Express路由的ajax函数 . 但是，我的路由处理程序不接收使用Ajax请求传递的数据 .

我的Express应用程序（我将特定路径放在主app.js中用于测试目的）：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var app = express();

var lists = require('./routes/lists');

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

app.use('/', express.static(path.join(__dirname, 'public')));
app.use('/lists', lists);

app.get('/lists/show', bodyParser.json(), function(req, res, next) {
    console.log(req.body);
});

我的Ajax函数（调用时reqData是{id：this.props.id}）：

export default function(reqData, path, method, onSuccess, onError, onComplete) {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                if(onSuccess) onSuccess(xhr.responseText != '' ? JSON.parse(xhr.responseText) : '');
            } else {
                if(onError && xhr.responseText != '') {
                    let data = JSON.parse(xhr.responseText);
                    if(data.ExceptionMessage) onError(data.ExceptionMessage);
                }
            }
        }
    };
    let url = window.location.href.replace('#', '') + path;
    xhr.open(method, url);
    xhr.setRequestHeader('Content-Type', 'application/json');
    console.log(JSON.stringify(reqData));
    xhr.send(JSON.stringify(reqData));
    return xhr;
}

我知道bodyParser正在工作，因为路由处理程序中的console.log将{}打印到服务器端控制台，表明req.body为空 .

我已经尝试将reqData传递给xhr.send，有或没有JSON.stringify，两者都没有用 . 但是json完美地打印到浏览器控制台 .

我完全不知道我的要求在哪里 . 我是否从根本上误解了xhr.send和Express路线如何相互作用？

javascript json ajax reactjs express

2 回答

  • 0

    好的，现在我想我知道问题出在哪里 - 这是你用XHR的方法：

    xhr.open(method, url);

    如果您使用GET，那么您将没有请求正文 . 如果您使用POST，则处理程序位于 ./routes/lists 中的某个位置 .

    假设您只在提供的代码段中执行 console.log ，实际上您使用的是GET . 根据Mozilla docs for XHR：

    XMLHttpRequest.send（）方法发送请求 . [...] send（）接受请求体的可选参数 . 如果请求方法是GET或HEAD，则忽略该参数并将请求体设置为null .

    回复于
  • 1

    你为什么不尝试使用某种类似的ajax库：https://github.com/yuanyan/react-ajax

    回复于

相关问题