Question

我最近从一个codeigniter框架迁移到一个带有快速框架的nodejs。我们的codeigniter站点有很多JS，我们做了很多AJAX调用，因为它是一个单页面应用程序。我们现在正在搞乱节点和表达，我无法获得一个简单的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>

所以基本上我要做的就是当点击按钮时我希望ajax调用显示部分视图。我们构建网站的方式是拥有一个页面，并让ajax调用根据用户点击的按钮呈现不同的视图。所以这是有趣的部分：我从ajax调用获得成功警报，但{{title}}和{{＆gt; part}}永远不会出现。但是，当我进入控制台并单击“网络”，然后单击“测试”（我的ajax调用的URL）时，响应显示填充了“Horray”和“传递给我!!”的div。对不起，谢谢您提供给我们的任何信息。

Answer 1

如果您使用ajax调用资源（正如您所做的那样），那么您将获得对ajax函数的响应。成功调用后，您需要在客户端JS代码中呈现视图。

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

你的成功处理可能是这样的：

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

Answer 2

您只需发送JSON即可。您需要通过send not render发送json。因为render应该提供完整的HTML页面。可能是.ejs文件。

例如：

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

res.send应该用于将json传递给你的页面。在您的页面上，您必须使用JSON动态填充HTML。

用nodeJS调用AJAX并表示成功，但不显示数据

2 个答案: