javascript - AJAX post data undefined? -
i'm trying make ajax post request root directory on express server.
when use html form , submit artist name, response , can send information client fine...
see res.send(tourdetails);
when run code this, json array back, , i'm go.
var express = require('express'); var app = express(); var bodyparser = require('body-parser') app.use(bodyparser.json()); // support json-encoded bodies app.use(bodyparser.urlencoded({ // 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...'); }); but, when try add ajax post request run trouble. replacing res.send(tourdetails) console.log(artistname), see artistname undefined. it's recognized when use html form, breaks when introduce 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'); }); here's 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> i've been busting brain on hours. advice appreciated!
your $.post request isn't sending data @ server, have send form data
$('#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'); });
Comments
Post a Comment