将 html div 传递给 ajax 调用答案

【问题标题】：Pass html div to ajax call将 html div 传递给 ajax 调用
【发布时间】：2017-11-16 07:16:07
【问题描述】：

所以我有我的服务器端代码，它执行多个 bigquery 查询并将结果排列在一个表中，并且这个服务器端代码由客户端的 ajax 调用调用。我希望能够将表/div 从我的服务器端代码发送到客户端并在那里呈现。这可能吗？？

我不希望通过首先通过调用获取 JSON 结果来在客户端创建表，因为我不知道哪个查询将首先运行并且所有结果都不同。（对于每个查询，多个 ajax 调用也是不可能的）

服务器代码 (app.js)

 function printResult(rows, queryNumber) {
    console.log('Query No. '+queryNumber+' Results:____');
    var keys = [];
    if (queryNumber == 1) {
        var table = document.createElement('table');

        var td = [];
        var tr = document.createElement('tr');
        for (var i = 0; i < rows[0].length; i++) {
            var tn1 = document.createTextNode(rows[i].Content_title);
            var tn2 = document.createTextNode(rows[i].Audience_Size);

            td[i] = document.createElement('td');
            td[i].appendChild(tn1);
            td[i + 1] = document.createElement('td').appendChild(tn2);

            tr.appendChild(td[i]);
            tr.appendChild(td[i + 1]);
            table.appendChild(tr);
            res.send(table);
        }
    }
}

Ajax 调用

$.ajax({
    url: 'http://localhost:3000/example',
    type: 'POST',
    data: {showname: show, counter: uniquesOverallShowsCounter},
    dataType: 'text',
    contentType: 'application/x-www-form-urlencoded',
    success: function (data) {




        document.getElementById('outputTables').appendChild(data);


    },
    error: function() {
        console.log("error");
    }
});

【问题讨论】：

您还应该包含一个数据示例
这肯定行得通，但您的res.send(table) 目前处于错误位置。将它放在你的 for 循环之后。
@DouwedeHaan 我收到错误消息“无法在 'Node' 上执行 'appendChild'：参数 1 不是 'Node' 类型。”在 ajax 调用中。
appendChild 需要一个 documentElement（纯 JavaScript）。由于您已经在使用 jQuery，我建议您使用 $('#outputTables').append(data); 而不是 document.getElementById('outputTables').appendChild(data); 如果这是解决您问题的方法，我会将其编辑为答案。

标签： javascript jquery html node.js ajax

【解决方案1】：

那么，您能否简单地根据所命中的查询（例如“queryProcessed”）在响应 json 中增加一个参数？

并在客户端添加额外检查并根据“queryProcessed”呈现标记

【讨论】：

【解决方案2】：

是的，你可以，但正如你在 cmets 中指出的，返回的数据有问题。

在“Node”上执行“appendChild”失败：参数 1 不是“Node”类型。

当您尝试使用不是 documentElement（即document.createElement('div')）的 JavaScript 附加子节点时，会引发此错误。由于您已经在使用 jQuery，因此您可以轻松更改代码。

在AJAX调用的成功函数中，更改

document.getElementById('outputTables').appendChild(data);

到

$('#outputTables').append(data);

如果您希望能够从一个页面执行多个 AJAX 调用并且每次都更改表格（例如用新表格替换旧表格），您应该使用 html(data) 而不是 append(data)。

【讨论】：

非常感谢您的帮助！但我收到另一个错误，错误：TypeError：将循环结构转换为 JSON。这来自 app.js，我认为可能来自 res.send() 函数。有什么修复吗？
@HamzaMoiyadi 该错误显示在客户端还是服务器端？
服务器端来了
@HamzaMoiyadi 我不确定，但 StackOverflow 上有很多关于该错误的参考资料。我建议将其放在一个新问题中或搜索可以提供答案的旧问题，因为我在 node.js 方面没有那么经验。
@HamzaMoiyadi 没问题，乐于助人！顺便说一句，如果这个答案解决了您之前的问题，您可以随时投票/接受它！可以帮助其他有同样问题的人。