Question

我目前正在开发一个Web应用程序，我通过ajax请求获取大量数据，通过body上的onload事件触发它。当我尝试追加时，一旦检索到数据，我需要jquery和其他CSS文件用于UI样式和其他功能（jquery）的数据不适用于新数据，我无法刷新整个页面，因为它会进行另一个ajax调用。那么，有没有办法在收到数据后重新加载（刷新）特定的表，或阻止表加载，直到收到数据为止。

Answer 1

有多种解决方案，可能并非所有解决方案都适合每种设置。具体来说，如果您使用MVVM框架（如Angular，Vue或类似程序），您应该能够利用其组件来完成工作。既然你没有提到这样的框架，我认为你需要一个普通的JS解决方案。

一种可能性是创建一个空表并在ajax调用的回调中手动构建缺少的HTML：

<table id="foo"></table>

<script>
    const callback = (results) => {
        const table = document.getElementById("foo");
        let innerHTML = "";
        results.forEach((result) => {
            innerHTML += `<tr><td>${result.column1}</td>` +
                         `<td>${result.column2}</td></tr>`;
        });
        table.innerHTML = innerHTML;
    };
</script>

您还可以考虑使用HTML templates。在您的ajax调用的回调中，您可以处理数据以填充模板，然后根据需要向表中追加多行：

<table id="foo"></table>
<template id="bar">
    <tr>
        <td></td>
        <td></td>
    </tr>
</template>

<script>
    const callback = (results) => {
        const table = document.getElementById("foo");
        const rowTemplate = document.getElementById("bar");
        results.forEach(result => {
            const cells = rowTemplate.content.querySelectorAll("td");
            cells[0].textContent = result.column1;
            cells[1].textContent = result.column2;

            table.appendChild(document.importNode(rowTemplate.content, true));
        });
    };
</script>

利用模板的更有趣的方法可能是使用模板引擎。这是使用Nunjucks的一个例子：

<table id="foo"></table>
<template id="bar">
    {% for result in results %}
    <tr>
        <td>{{result.column1}}</td>
        <td>{{result.column2}}</td>
    </tr>
    {% endfor %}
</template>

<script>
    const callback = (results) => {
        const table = document.getElementById("foo");
        const templateHTML = document.getElementById("bar").innerHTML;
        const rowTemplate = nunjucks.compile(templateHTML);

        table.innerHTML = rowTemplate.render({results});
    };
</script>

最后，如果你可以控制ajax调用返回的数据，你也可以采用老式的方式，只返回那里的HTML而不是JSON数组。

对于CSS样式，您需要确保CSS规则的编写方式将应用于生成的代码。它们将自动使用，无需重新加载页面。

如果您需要对表行进行进一步操作，即添加事件侦听器，最好只在表元素上设置它们，然后检查事件目标。这样您就可以操作表内容，而无需删除和重新添加任何事件侦听器。

如何在提取数据后加载表

1 个答案: