AJAX 发布数据未定义？答案

【问题标题】：AJAX post data undefined?AJAX 发布数据未定义？
【发布时间】：2016-02-03 10:37:26
【问题描述】：

我正在尝试向我的 Express 服务器上的根目录发出 Ajax 发布请求。

当我只使用 HTML 表单并提交艺术家姓名时，我会收到回复并可以将信息发送给客户端就好了......

见 res.send(tourDetails);

当我像这样运行代码时，我得到了 JSON 数组，我可以开始了。

var express = require('express');
var app = express();

var bodyParser = require('body-parser')
app.use(bodyParser.json());       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  extended: true
}));

var TourSchedule = require('./artist_profile.js');

app.use('/public', express.static(__dirname + '/public'));

app.set('view engine', 'jade');
app.set('views', __dirname + '/views');

app.get('/', function(req, res){
    res.render('layout.jade');
});

app.post('/', function(req, res){
    var artistName = req.body.artist_name;
    var tour = new TourSchedule(artistName);
    tour.on('end', function(tourDetails){
        res.send(tourDetails);
    });
});

app.listen(3000, function(){
    console.log('Front-end server started on port 3000...');
});

但是，当我尝试添加我的 ajax 发布请求时，我遇到了麻烦。用 console.log(artistName) 替换 res.send(tourDetails)，我看到 artistName 是未定义的。所以当我只使用 HTMl 表单时它会被识别，但是当我引入我的 Ajax 时它会中断。

$('#artist-form').on('submit', function(evt){
    evt.preventDefault();
    $.post('/', function(res){
        var tourInfo = $.parseJSON(res);
        var tourHTML;
        $.each(tourInfo, function(ind, val){
            tourHTML += '<ul class="show-details">';
            tourHTML += '<li class="show-title">';
            tourHTML += tourInfo[ind].title;
            tourHTML += '</li>';
            tourHTML += '<li class="show-date">';
            tourHTML += tourInfo[ind].formatted_datetime;
            tourHTML += '</li>';
            tourHTML += '<li class="show-tickets">';
            tourHTML += 'Tickets: ' + tourInfo[ind].ticket_status;
            tourHTML += '</li>';
            tourHTML += '</ul>';
        });
        $('.artist-tour').append(tourHTML);
    }, 'json');
});

这是 HTML...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>snapTour</title>
  </head>
  <body>
    <form method="post" id="artist-form">
      <input type="text" id="artist-field" name="artist_name">
      <button type="submit">Search</button>
    </form>
    <div class="artist-tour"></div>
    <script src="../public/js/jquery.min.js"></script>
    <script src="../public/js/jquery.js"></script>
  </body>
</html>

我已经为此绞尽脑汁好几个小时了。非常感谢任何建议！

【问题讨论】：

标签： javascript jquery node.js express

【解决方案1】：

您的$.post 请求根本没有向服务器发送任何数据，您必须实际发送表单数据

$('#artist-form').on('submit', function(evt){
    evt.preventDefault();

    var data = $(this).serialize();

    $.post('/', data, function(res){
        var tourInfo = $.parseJSON(res);
        var tourHTML;
        $.each(tourInfo, function(ind, val){
            tourHTML += '<ul class="show-details">';
            tourHTML += '<li class="show-title">';
            tourHTML += tourInfo[ind].title;
            tourHTML += '</li>';
            tourHTML += '<li class="show-date">';
            tourHTML += tourInfo[ind].formatted_datetime;
            tourHTML += '</li>';
            tourHTML += '<li class="show-tickets">';
            tourHTML += 'Tickets: ' + tourInfo[ind].ticket_status;
            tourHTML += '</li>';
            tourHTML += '</ul>';
        });
        $('.artist-tour').append(tourHTML);
    }, 'json');
});

【讨论】：

看起来这也不起作用。奇怪的是，typeof req.body 仍然说我正在发送一个对象，即使在序列化之后也是如此。
所以它不再是undefined，而是一个对象？现在console.log( artistName ) 会得到什么？
无论有没有您的更改，console.log(req.body) 返回空对象，console.log(artistName) 返回未定义。我唯一能想到的是我的表格有问题，但看起来很好。如果你觉得如此热情，这里是 github。 github.com/danemery/snapTour
您将不得不自己进行一些调试。打开您的浏览器控制台 (F12) 并查看使用正确的数据等发出 POST 请求。我已经对其进行了测试，看起来很好，数据应该会到达服务器

【解决方案2】：

我明白了。

由于我从另一个 API 请求 JSON，因此在带回 tourDetails 时需要使用 JSONP。

var express = require('express');
var app = express();

var bodyParser = require('body-parser')
app.use(bodyParser.json());       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  extended: true
}));

var TourSchedule = require('./artist_profile.js');

app.use('/public', express.static(__dirname + '/public'));

app.set('view engine', 'jade');
app.set('views', __dirname + '/views');

app.get('/', function(req, res){
    res.render('layout.jade');
});

app.post('/', function(req, res){
    var artistName = req.body.artist_name;
    var tour = new TourSchedule(artistName);
    tour.on('end', function(tourDetails){
        res.jsonp(tourDetails);
    });
});

app.listen(3000, function(){
    console.log('Front-end server started on port 3000...');
});

这与在 Ajax 中序列化数据相结合，解决了这个问题。

谢谢，阿德尼奥！

【讨论】：