使用htmxjs将数据加载到表单中

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

虽然了解了HTMX的基本逻辑，但还是有一些方面没搞懂。

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

<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></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>
    <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>
        <input type="text" name="firstname" value="John">
        <input type="text" name="secondname" value="Smith">
    </form>
";

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

我很确定我错过了一些东西......

回答