AJAX调用nodeJS和expression成功,但不显示数据

我最近已经从一个codeigniter框架迁移到一个具有明确框架的nodejs。 我们的codeigniter网站有很多JS,因为它是一个单一的页面应用程序,我们做了很多的AJAX调用。 我们现在正在搞乱节点和expression,而且我无法获得一个简单的AJAX调用来运行。 这可能是对节点缺乏了解,也可能是别的。 我们正在使用openshift来主持。 我们使用hogan-express作为模板。

server.js

var express = require('express'); var fs = require('fs'); var http = require('http'); var path = require('path'); var SampleApp = function() { var self = this; self.initializeServer = function() { self.app = module.exports = express(); self.app.configure(function() { self.app.set('views', __dirname + '/views'); self.app.set('view engine', 'html'); self.app.engine('html', require('hogan-express')); //self.app.set('layout', 'layout') # use layout.html as the default layout self.app.use(express.favicon()); self.app.use(express.logger('dev')); self.app.use(express.bodyParser()); self.app.use(express.methodOverride()); self.app.use(express.session()); self.app.use(self.app.router); self.app.use(require('stylus').middleware(__dirname + '/public')); self.app.use(express.static(path.join(__dirname, 'public'))); }); require('./routes'); } 

这个文件中有更多的代码,我只包括相关的代码(我认为)。

Ajax.html

  <div id="button"> <button id="testbutton">Push Me!</button> </div> <div id="populate">{{title}}</div> <div id="null">{{>part}}</div> <script type='text/javascript'> $(function(){ $('#testbutton').click(function (){ $.ajax({ url:'/test', type: 'POST', success: function(result){ alert('success!'); }, error: function(){ alert("well this is embarassing... if the problem persists please let us know at facebook.com/stembuds"); } }); }); }); </script> 

index.js

  app = require('../server'); app.get('/', function(req, res){ res.render('ajax'); }); app.post('/test', function(req, res){ console.log('get'); res.locals = {title: 'Horray'}; res.render('ajax', {partials:{part:'part'}}); }); 

part.html

  <p> pass me in!!</p> 

所以基本上我试图做的是当button被点击我想要ajax调用显示一个局部视图。 我们要构build网站的方式是只有一个页面,并且ajax调用根据用户点击的button来呈现不同的视图。 所以这里有一个有趣的部分:我从ajax调用中获得了成功警报,但{{title}}和{{> part}}从不出现。 然而,当我去控制台,点击“networking”,然后点击“testing”(URL到我的ajax调用),响应显示填充“Horray”和“通过我!!”的div。 对不起的长度,并感谢您的任何信息,您可以提供给我们。

如果你用ajax调用你的资源(就像你正在做的那样),那么你得到了对你的ajax函数的响应。 成功调用之后,您需要在客户端JS代码中呈现视图。

我的意思是你的代码按预期工作,但你的后端无法更新你的浏览器视图。 你需要做客户端或从服务器再次加载整个页面。

你的成功可能是这样的:

 success: function(result){ renderTheResults(result); }, 

你可以发送JSON。 你需要通过发送不呈现发送json。 因为渲染应该提供完整的HTML页面。 可能是.ejs文件。

例如:

  res.send({partials:{part:'part'}}); 

应该使用res.send将json传递给你的页面。 而在你的页面上,你必须使用JSON来dynamic地填充HTML。