php - 添加额外的 HTML 行 : where to put the code?

Question

我有以下情况:

<table><tr><td width="50">
<select name="angle">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td><td>
<input type="text" name="what" value="" />
</td></tr></table>
<a href="">+ Add Row</a>

因此，计划是当用户第一次访问页面时，他们将看到 1 行。他们将输入数据并多次单击“添加行”以输入所有数据。稍后，他们应该能够返回并编辑或删除任何行。

我的问题是:在 javascript 中，我需要完整的 HTML 来生成每一行或执行 AJAX 请求以从服务器获取新行。在服务器上，当用户回来编辑时，我需要 HTML 来生成行，或者我是否使用 json 数组传递值。

我想知道你会做什么，因为我试图避免在两个地方出现 HTML。你会把所有的 HTML 都放在 JS 中吗？或者您会将所有 HTML 放在服务器 (PHP) 上并使用 AJAX 进行调用？或者你只是将 HTML 放在 2 个地方吗？ (顺便说一句，我正在处理的案例有 5 列和更多 HMTL。)

我正在使用:PHP + MySQL + jQuery

Answer 1

正如您所描述的，有多种方法可以解决这个问题，每种方法都需要权衡。我已经尝试过一些。我会避免将 HTML 放在两个位置，因为将来维护起来会需要更多工作。

一种方法是将 HTML 保留在初始页面上 - 您可以在隐藏行中创建"template"。然后，您可以使用 Web 语言(PHP 或其他语言)生成已保存数据的行以及隐藏的模板行。当用户单击添加行链接/按钮时，您可以克隆该行并将其插入到表格末尾或模板行之前。这样做的好处是用户不必等待 ajax 调用来加载其他行。此外，您还可以轻松修改设计。潜在的缺点是通过隐藏行来掩盖其工作原理。

另一种方法是通过 ajax 完成所有加载并请求每个 HTML 行。在这种情况下，我建议将 HTML 放入可以包含在初始页面中或通过 ajax 调用加载的模板中。所有 HTML 都集中在一处。您还可以预加载额外的行，这样就不会出现 ajax 延迟。当用户单击“添加行”时，显示隐藏的预加载行并加载附加的隐藏行。

最后，另一种方法是使用上述模板行方法(第一个选项)并在页面加载时对 JSON 执行 ajax 请求。然后，您可以通过 js 和 JSON 数据填充已保存数据的必要行。用户必须等待数据加载，但这可以稍微简化事情。