如何将变量从 X-DATA 发送到服务器。 Alpine JS、HTMX 和 Django？

Question

我有下一个片段。有几个 select 块。我想做的是收集这两个变量并发送到 Django 服务器。但是 request.GET 是空的。怎么了？

<div class="flex" x-data="{ foo: '',  bar: ''}">
  <div class="flex justify-between">
    <div class="mt-1">

      <select x-model="foo"
              name="foo"
              id="foo"
              class="w-64 h-14 text-sm border-gray-300 focus:bg-transparent">
        <option value="">Type of FOO</option>
        <option value="FOO_1">FOO_1</option>
        <option value="FOO_2">FOO_2</option>
        <option value="FOO_1">FOO_3</option>
      </select>
    </div>

    <div class="mt-1">
      <select name="bar"
              x-model="bar"
              id="bar"
              class="w-64 h-14 text-sm border-gray-300 focus:bg-transparent">
        <option value="">BAR Types</option>
        <option value="BAR_1">BAR_1</option>
        <option value="BAR_2">BAR_2</option>
        <option value="BAR_3">BAR_3</option>
      </select>
    </div>


    <input type="text" name="foo" x-model="foo" hidden />
    <input type="text" name="bar" x-model="bar" hidden />

    <button
      hx-get="{% url 'server:parse-values' %}"
      hx-target="#element"
      hx-swap="innerHTML"
      hx-include="[name='foo', name='bar']">
    <span
      class="cursor-pointer px-3 py-3 border-2">Parse details</span>
    </button>
  </div>

</div>

但是当我点击按钮时，Django 后端没有收到 foo 和 bar 参数。

有什么想法吗？

Answer 1

要包含多个输入，您需要像这样用逗号分隔它们：

hx-include="input[name='foo'], input[name='bar']"

这相当于使用 querySelectorAll 获取您的输入：

document.querySelectorAll("input[name='foo'], input[name='bar']")

我添加了额外的 input，因此它排除了 select 列表，但您可以从示例中删除隐藏的输入，只包含列表。

我还应该补充一点，如果您将 htmx 属性从按钮移至 x-data div 并将其更改为表单。然后将按钮更改为键入 submit。所有表单数据将自动发送到服务器。

<form class="flex" x-data="{ foo: '',  bar: ''}" 
        hx-get="{% url 'server:parse-values' %}"
        hx-target="#element"
        hx-swap="innerHTML"
    >
        <div class="flex justify-between">
            <div class="mt-1">

            <select x-model="foo"
                    name="foo"
                    id="foo"
                    class="w-64 h-14 text-sm border-gray-300 focus:bg-transparent">
                <option value="">Type of FOO</option>
                <option value="FOO_1">FOO_1</option>
                <option value="FOO_2">FOO_2</option>
                <option value="FOO_1">FOO_3</option>
            </select>
            </div>

            <div class="mt-1">
            <select name="bar"
                    x-model="bar"
                    id="bar"
                    class="w-64 h-14 text-sm border-gray-300 focus:bg-transparent">
                <option value="">BAR Types</option>
                <option value="BAR_1">BAR_1</option>
                <option value="BAR_2">BAR_2</option>
                <option value="BAR_3">BAR_3</option>
            </select>
        </div>

        <button type="submit">
            <span class="cursor-pointer px-3 py-3 border-2">Parse details</span>
        </button>
</form>

如何将变量从 X-DATA 发送到服务器。 Alpine JS、HTMX 和 Django？

How to send variables from X-DATA to the server. Alpine JS & HTMX & Django?

django

django-templates

alpine.js

htmx