jQuery Ajax发布请求与node.js和express
我正在尝试使用JQuery向Node.JS和Express中的Node.JS服务器发出AJAX请求,但它不起作用!
var express = require('express') var app = express(); app.listen(8888); app.configure(function(){ app.use(express.bodyParser()); app.set('views',__dirname + '/views'); app.set('view engine', 'ejs'); app.use(express.static(__dirname + '/public')); app.use(express.cookieParser()); app.use(app.router); }); app.get('/', function (req, res){ res.render('ajax.ejs'); }); app.post('/ajax', express.bodyParser(), function (req, res){ console.log(req); console.log('req received'); res.redirect('/'); });
这是ajax.ejs
:
<html> <head> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $('#enter').click(function(){ $.ajax({ url: '/ajax', type: 'POST', cache: false, data: { field1: 1, field2: 2 }, success: function(data){ alert('Success!') } , error: function(jqXHR, textStatus, err){ alert('text status '+textStatus+', err '+err) } }) }); </script> </head> <body> <form> <input type="button" id="enter" value="Enter"> </form> </body> </html>
加载ajax.ejs
,控制台中没有任何输出,所以post请求不起作用。 我能做什么?
感谢提前!
我发现你的问题。 您需要将脚本从头部移到身体(在表单标签之后):
... </form> <script type="text/javascript"> $('#enter').click(function(){ ... </script> </body>
以下代码按照新版本运行。
server.js
var express = require('express') var app = express(); var bodyparser = require('body-parser'); var urlencodedparser = bodyparser.urlencoded({extended:false}) app.set('views',__dirname + '/views'); app.set('view engine', 'ejs'); app.use(express.static(__dirname + '/public')); app.use(express.cookieParser()); app.get('/', function (req, res){ res.render('ajax.ejs'); }); app.post('/ajax', urlencodedparser, function (req, res){ console.log(req); console.log('req received'); res.redirect('/'); }); app.listen(8888);
ajax.ejs
<html> <head> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> </head> <body> <form> <input type="button" id="enter" value="Enter"> <script type="text/javascript"> $('#enter').click(function(){ $.ajax({ url: '/ajax', type: 'POST', cache: false, data: { field1: 1, field2: 2 }, success: function(data){ alert('Success!') } , error: function(jqXHR, textStatus, err){ alert('text status '+textStatus+', err '+err) } }) }); </script> </form> </body> </html>