在 AJAX 发布后显示服务器发送的 HTML 页面答案

【问题标题】：Displaying an HTML page sent by the server after an AJAX post在 AJAX 发布后显示服务器发送的 HTML 页面
【发布时间】：2016-08-27 17:55:49
【问题描述】：

我在互联网上搜索后问这个问题。我经常使用 JEE 服务器和 jsps 来做这件事。我正在尝试使用 Node 和 JQuery，但很难让它工作。我有一个获取输入的表单，我向服务器发送了一个 Ajax 帖子，服务器通过根据输入呈现视图来响应。在我看来，我不必担心附加到客户端点击事件的弹出窗口。在我的一生中，我无法显示服务器响应输入而发送的页面。我在这里错过了什么吗？任何关于这个用例的智慧珍珠都将不胜感激。我尝试了一些相关的例子，但他们没有看到工作。这是代码。从服务器返回时，不会呈现 HTML。我只是添加了执行 AJAX 发布并处理来自服务器的响应的 javascript。

script.
  $(document).ready(function() {
     $("#dialog").dialog({
       autoOpen: false,
       modal: true,
       title: "Details",
       buttons: {
           Close: function () {
               $(this).dialog('close');
           }
       }
     });
     $("#OK").click(function() {
        var org = $("#name").val();
        if (org == '' ){
           alert("Please Fill Required Fields");
        } else {
           alert("about to post "+org);
           $.post("/repost", 
              {name: org})
              .done(function(data) {
                 alert(data);
                 $("#dialog").html(data);
                 $("#dialog").dialog("open");
              });
           $("#form")[0].reset();
        } 
     });
     $("#cancel").click(function() {
         $("#form").dialog("close"); // To close the form
     });
  });

服务器代码：

app.post('/repost', function(req, res) {
 console.log("We are called with ", req.body);
 res.render('reposub.jade', {org:req.body.name, title: 'Express' });});

【问题讨论】：

标签： javascript jquery ajax node.js express

【解决方案1】：

听起来您正在寻求$.post 的帮助：

$.post( "ajax/test.html", function( tx_response ) {
  //console.dir(tx_reponse) -- does this have ususal stuff like _data_ and _status_? Or is is a raw HTML response?
    if (/* some condition like: tx_response.status === 200 */) {
    // if the html is a template, and not a redirect to a new url:
      $('.result').html(tx_response.data)
    // redirect:
    window.location.href = tx_response.data
//...
});

如果它既不是重定向也不是模板，而是客户端应该加载的带有 HTML 的全新 http 回复，我认为您可以使用 document.write 但是 .. 在这种情况下可以更好地设计。可以说，响应最多应该是一个重定向 URL 或一个模板。

【讨论】：

服务器上的代码：app.post('/repost', function(req, res) { console.log("We are called with ", req.body); res.render('reposub.jade', {org:req.body.name, title: 'Express' }); });
您也可以返回并标记您的问题。 :) 嗯，返回一整页。所以document.write(tx_response.data) 会渲染它（如果遇到问题，只需检查console.dir(tx_response)）.. 你可能会考虑只返回一个模板并在视图中渲染它，而不是来自服务器的整个页面。
感谢将标记为快递。我所关注的范例类似于我们使用 Java 应用程序服务器的范例。应该有一个经典的方法来做到这一点。 1. 我将数据发布到服务器 2. 服务器处理数据 3. 服务器渲染模板以响应数据并将其发送给客户端。不确定 Express 的设计是否考虑到了这一点。
是的，所以.. 你试过我的建议了吗？这应该是答案。
我尝试了您在第一次回复中的内容，但没有成功。我将尝试 document.write 以及它需要我去哪里。我还试图避免打开一个新窗口并写入它，因为这几乎是大多数浏览器阻止的弹出窗口，需要人们特别允许它们。

【解决方案2】：

除了 roberto tomás 的回答之外，还要确保您的服务器启用了 CORS 支持。这在以下情况下特别有用：

在本地开发一些不由网络服务器提供服务的东西；
当您的前端不在后端（在您的情况下是您的 nodejs 应用程序）的同一主机（因此是 ip 和端口组合）上时

有用的资源：

【讨论】：

它在同一个域中。服务器通过执行 res.render() 进行响应，html 很好。我只是无法显示它。

【解决方案3】：

所以在我的例子中，我必须有一个可以运行 html 方法的 div 元素。因此，通过在我的 html 页面的正文中创建一个 div 元素，我能够执行 $("div.listcontainer").html(data);我的页面显示正常。

【讨论】：