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

I GOT IT.

Since I'm requesting JSON from another API, I needed to use JSONP when bringing back tourDetails.

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

This, combined with serializing the data in Ajax, solved the problem.

Thanks, adeneo!

AJAX发布数据未定义？

2 个答案: