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