使用 node.js 和 express 发布 JQuery Ajax 请求

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14061644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 13:14:23  来源:igfitidea点击:

JQuery Ajax post request with node.js and express

jqueryajaxnode.jspostexpress

提问by MrMangado

I was trying to make AJAX post request with JQuery to my Node.JS server in Node.JS and Express, but it doesn't works!

我试图在 Node.JS 和 Express 中使用 JQuery 向我的 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('/');

});

And this is the ajax.ejs:

这是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>

When the ajax.ejsis loaded, there isn't any output in the console, so, the post request didn't work. What can I do?

ajax.ejs被加载,没有在控制台的任何输出,因此,POST请求没有工作。我能做什么?

Thanks advance!

先谢谢了!

回答by asgoth

I found your problem. You need to move your script from your head to your body (after the form tag):

我发现了你的问题。您需要将您的脚本从您的头部移动到您的身体(在 form 标签之后):

...
</form>
<script type="text/javascript">

   $('#enter').click(function(){  
   ...

</script>
</body>

回答by sreepurna

The below code works as per the new releases.

以下代码根据新版本工作。

server.js

服务器.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

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>