Javascript AJAX post数据未定义?
我正在尝试向Express服务器上的根目录发出Ajax post请求 当我使用HTML表单并提交艺术家姓名时,我会得到回复,并可以将信息发送到客户端 见res.send(详情) 当我像这样运行代码时,我得到了JSON数组,我很乐意去做Javascript AJAX post数据未定义?,javascript,jquery,node.js,express,Javascript,Jquery,Node.js,Express,我正在尝试向Express服务器上的根目录发出Ajax post请求 当我使用HTML表单并提交艺术家姓名时,我会得到回复,并可以将信息发送到客户端 见res.send(详情) 当我像这样运行代码时,我得到了JSON数组,我很乐意去做 var express = require('express'); var app = express(); var bodyParser = require('body-parser') app.use(bodyParser.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 post请求时,我遇到了麻烦。将res.send(tourDetails)替换为console.log(artistName),我发现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');
});
$(“#艺术家形式”)。关于('submit',函数(evt){
evt.preventDefault();
$.post('/',函数(res){
var tourInfo=$.parseJSON(res);
var-tourHTML;
$。每个(旅游信息、功能(ind、val){
tourHTML+=';
tourHTML+='- ';
tourHTML+=tourInfo[ind]。标题;
tourHTML+='
';
tourHTML+='- ;
tourHTML+=tourInfo[ind]。已格式化的\u日期时间;
tourHTML+='
';
tourHTML+='- ;
tourHTML+=“票证:”+tourInfo[ind]。票证状态;
tourHTML+='
';
tourHTML+='
';
});
$('.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>
snapTour
搜寻
我已经为此绞尽脑汁好几个小时了。非常感谢您的建议 您的
$。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');
});
$(“#艺术家形式”)。关于('submit',函数(evt){
evt.preventDefault();
var data=$(this.serialize();
$.post('/',数据,函数(res){
var tourInfo=$.parseJSON(res);
var-tourHTML;
$。每个(旅游信息、功能(ind、val){
tourHTML+=';
tourHTML+='- ';
tourHTML+=tourInfo[ind]。标题;
tourHTML+='
';
tourHTML+='- ;
tourHTML+=tourInfo[ind]。已格式化的\u日期时间;
tourHTML+='
';
tourHTML+='- ;
tourHTML+=“票证:”+tourInfo[ind]。票证状态;
tourHTML+='
';
tourHTML+='
';
});
$('.artist-tour').append(tourHTML);
}“json”);
});
我明白了
因为我从另一个API请求JSON,所以在返回详细信息时需要使用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中序列化数据相结合,解决了这个问题
谢谢你,阿迪内奥 看起来这也不管用。奇怪的是,typeof req.body仍然说我正在发送一个对象,即使在序列化之后。所以它不再是
未定义的,而是一个对象?当您现在console.log(artistName)
时,您会得到什么?无论有无更改,console.log(req.body)返回空对象,console.log(artistName)返回未定义对象。我唯一能想到的是我的状态有问题,但看起来不错。这是github,如果你感到如此热情的话。你得自己调试一下。打开浏览器控制台(F12),查看POST请求是否使用了正确的数据等。我已经对其进行了测试,结果似乎很好,数据应该会到达服务器