3

我正在使用HTMXJS一个 javascript 库，它允许您直接在 HTML 中访问 AJAX。

虽然我了解HTMX的基本逻辑，但也有一些方面我没有得到。

我设法制作了一个表格并将数据写入服务器：

<form id="my-form">
    <input type="text" name="firstname">
    <input type="text" name="secondname">

    <button type="button"
        hx-post="write.php"
        hx-target="#container-div"
        hx-swap="innerHTML"> 
        Submit
    </button>
</form>

<div id="container-div"></div>

HTMX 将读取所有name内容并将它们提交到write.php可以通过以下循环读取的位置$_POST：

写.php：

foreach ($_POST as $key => $value) {
    echo "Field ".htmlspecialchars($key)." is ".htmlspecialchars($value)."<br>";
}

我不明白如何用服务器返回的数据填充表单。例如，给定以下表单和以下输出，我想INPUT在按下按钮时填充单个字段：

HTML：

<button type="button"
    hx-get="load.php"
    hx-target="#my-form"
    hx-swap="innerHTML">
    Load data
</button>

<form id="my-form">
    <input type="text" name="firstname">
    <input type="text" name="secondname">
</form>

加载.php：

$a = array(
    "firstname" => "John",
    "secondname" => "Smith",
);

echo json_encode($a);

我知道文档说“当您使用 htmx 时，在服务器端您通常使用 HTML 而不是 JSON 响应”，但这是否意味着服务器输出应该是像这样再次呈现表单所需的整个 HTML 代码？

echo "
    <form id="my-form">
        <input type="text" name="firstname" value="John">
        <input type="text" name="secondname" value="Smith">
    </form>
";

如果表单有几十个字段、长选择菜单和复杂的复选框组怎么办？会不会是从服务器传递到客户端的大量数据？

我很确定我错过了什么......

4

2 回答 2

8

您的理解是正确的：htmx 会期望您返回所有要用于填充表单的 HTML。

这可能看起来效率低下，但事实证明 HTML 压缩得非常好，典型的有效负载并不比等效的 JSON 大多少。 这篇博客文章概述了为什么会这样。

此外，即使使用更大的有效负载，传输时间也常常与连接建立和处理时间相形见绌。htmx 不需要任何客户端模板，因此可以比许多需要它的基于 JSON 的 UI 设置快得多。intercooler.js 是 htmx 的前身，它源于我编写的一个小帮助函数，因为我正在处理一个 JSON 格式的巨大表，而且它需要很长时间。我发现仅仅接收 HTML 格式的表格并将其放入 DOM 的速度要快几个数量级。

说了这么多，我不想驳回你的问题。有一些方法可以在 htmx 中缩小有效载荷：

  • 您可以使用hx-target将更新的区域缩小到最少的 HTML
  • 您可以使用带外交换来定位特定项目以进行替换
  • 迫在眉睫，您可以使用HX-Trigger标头将数据直接传递给 javascript 事件处理程序以填充您的表单

但是，在执行任何操作之前，我建议您尝试无聊、简单的方法，看看性能是否可以接受。我猜答案是肯定的，并且您会发现减少维护负担是值得的，无论通过更复杂的解决方案可以实现什么小的性能增益。

于 2020-12-02T15:52:47.673 回答
0

您可以计算您先填写了多少表格然后输出或处理它们

<?php
$numberOfForm= (count($_POST))/2;
for ($i=1; $i<=$numberOfForm; $i++) {            
   // declare the variable 
   $firstname= $_POST["firstname"];
   $secondname = $_POST["secondname"];
    
   echo '$firstname'.'$secondname';

?>
于 2020-12-02T13:51:03.220 回答