AJAX发布数据未定义？

Question

我正在尝试向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>

我已经为此烦恼了好几个小时。 任何意见是极大的赞赏！

Answer 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');
});

Answer 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中序列化数据相结合，解决了该问题。

谢谢，阿代尼奥！

AJAX发布数据未定义？

问题描述

2 个解决方案

解决方案1
0 2016-02-03 01:18:17

解决方案2
0 2016-02-03 02:37:26

AJAX发布数据未定义？

问题描述

2 个解决方案

解决方案1 0 2016-02-03 01:18:17

解决方案2 0 2016-02-03 02:37:26

解决方案1
0 2016-02-03 01:18:17

解决方案2
0 2016-02-03 02:37:26