3

HTMLでAJAXに直接アクセスできるようにするJavaScriptライブラリであるHTMXJSを使用しています。

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

write.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を使用している場合、サーバー側では通常、JSONではなくHTMLで応答します」とドキュメントに書かれていることは知っていますが、これはサーバー出力が、フォームを再びレンダリングするために必要なHTMLコード全体でなければならないことを意味しますこのように?

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

フォームに多数のフィールド、長い選択メニュー、複雑なチェックボックス グループがある場合はどうなるでしょうか。サーバーからクライアントに渡される膨大な量のデータではないでしょうか。

私は何かが欠けていると確信しています...

4

2 に答える 2