使用nodeJS的AJAX调用并表达成功，但不显示数据答案

【问题标题】：AJAX call with nodeJS and express successful, but not displaying data使用nodeJS的AJAX调用并表达成功，但不显示数据
【发布时间】：2023-03-03 05:18:19
【问题描述】：

我最近从一个 codeigniter 框架迁移到一个带有 express 框架的 nodejs。我们的 codeigniter 网站有很多 JS，因为它是一个单页应用程序，所以我们进行了很多 AJAX 调用。我们现在正在搞乱 node 和 express，我无法获得简单的 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}} 和 {{>part}} 从未出现。但是，当我转到控制台并单击“网络”，然后单击“测试”（我的 ajax 调用的 url）时，响应显示填充有“万岁”和“传给我！！”的 div。抱歉，篇幅较长，感谢您提供的任何信息。

【问题讨论】：

标签： ajax node.js express hogan.js

【解决方案1】：

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

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

你的成功者可能是这样的：

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

【讨论】：

感谢您的回复。当我使用 console.log(result) 时，它会将整个 html 文件作为 html/text 提供给我。这是因为在我的 app.post 函数中，我再次渲染了整个视图吗？
那我该如何解决呢？我是否应该不使用 {{}} 标签，而只是发送信息并将其附加到 div 中？
是的，您已经有一个工作路线，您可以在其中获取要显示的视图。检查 jquery api 的 $.load() 函数，这将帮助你完成这个技巧。

【解决方案2】：

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

例如：

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

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

【讨论】：