通过AJAX调用快速路由来重定向页面

时间:2015-11-06 16:03:12

标签: jquery ajax express

在快递应用中,我在index.ejs中有一个 ajax post 调用,其url指向“ / featureDet ”路由(使用app声明)。在app.js中使用(' / featureDet',featureDet);

这是 index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="/javascripts/modernizr.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

  </head>
  <body>

    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>

    modernizr :
    <h1><%= typeof modernizr!='undefined' ? modernizr : '' %></h1>     

    <script>

    console.log( "the Modernizr object is  : " + JSON.stringify(Modernizr));

        $(document).ready(function() {
            console.log( "document loaded" );

            //console.log( "the Modernizr object is  : " + JSON.stringify(Modernizr) );

            $.post( "/featureDet", { "modernizr": JSON.stringify(Modernizr)}, function() {
              console.log( "success in sending POST req" );
            })
              .done(function() {
                console.log( "POST req reaches the server" );
                //window.location = "/featureDet";
              })
              .fail(function() {
                console.log( "error" );
              })
              .always(function() {
                console.log( "finished" );
            });

        });

        $(window).load(function() {
            console.log( "window loaded" );
        });
   </script>
  </body>
</html>

这是 featureDet.js

var express = require('express');
var router = express.Router();
var title, modernizr;

router.post('/', function(req, res, next) {

  console.log('a POST req was sent to the featureDet route!!'); 
  //console.log('The POST req modernizr parameter :: ' + req.body.modernizr);   



  modernizr = JSON.stringify(req.body.modernizr);  
  console.log('modernizr : ' + modernizr);

  // trying a render() with passing params
  //res.render('featureDet', { title: 'Feature Detection 2', modernizr: JSON.stringify(req.body.modernizr) });

  // trying a send() with passing params
  //res.send({ title: 'Feature Detection 2', modernizr: JSON.stringify(req.body.modernizr) });

  // trying a json response method1 (with send()):
  //res.type('json');
  //res.send({ modernizr: modernizr });

  // trying a json response method2 (with .json()):
  //res.json({ title: 'Feature Detection 2', modernizr: JSON.stringify(req.body.modernizr) })


  // trying a redirect:
  //res.end();
   //res.redirect('/featureDet');

  //trying a redirect with passing params in req.session:
  /*req.session.modernizr = JSON.stringify(req.body.modernizr);
  req.session.title = 'Feature Detection 2';
  res.redirect('/featureDet');*/

  //trying a redirect with params set in the url
  //res.redirect('/featureDet'
                //+'?title=' + encodeURIComponent('Feature Detection 2')
                //+ '&modernizr=' + encodeURIComponent(JSON.stringify(req.body.modernizr))
               //);
});

router.get('/', function(req, res, next) {
  console.log('a GET req was sent to the featureDet route!!');    
  console.log('modernizr : ' + modernizr);
  res.render('featureDet', { title: 'Feature Detection 2', modernizr: modernizr });

});
module.exports = router;

最后,这是 featureDet.ejs

<!DOCTYPE html>
<html>
  <head>
    <title>Feature Detection 2 </title>
    <link rel='stylesheet' href='/stylesheets/style.css' />

  </head>
  <body>
  This is featureDet.ejs
  <br/><br/>
  <h1><%= typeof modernizr!='undefined' ? modernizr : '' %></h1> 
  </body>
</html>

因此,如 featureDet.js 中的注释所示,我一直在尝试各种方法使浏览器将显示的视图从index.ejs更改为featureDet.ejs或从中获取json它(请参阅我使用的json方法)但我只是将这些结果仅作为firebug控制台中的响应显示已发送的请求状态,如下所示:

当htlm响应时:

enter image description here

当json回复:

enter image description here

在阅读了许多答案后,重定向页面的唯一解决方案是使用

  

window.location =“/ featureDet”;

在POST调用的.done()中。我想知道为什么我尝试的所有内容都失败了,因为路由本身被触发(所以代码已经到达..)但响应从不影响浏览器中的页面。在ajax调用之后是否无法进行重定向(我还尝试了对快速路由器的GET ajax调用,但它也不起作用)。如果不可能的话,我需要一个解释。

0 个答案:

没有答案