0

我正在尝试使用 django + HTMX 创建一个 CRUD 页面，但无法发送 POST 请求。hx-post 发送 GET 请求而不是 POST 请求。

我的榜样如下：

class Role(models.Model):
    name = models.CharField(max_length=200)

我正在使用 Cripsy Forms 创建表单，如下所示

class RoleForm(forms.ModelForm):
    class Meta:
        model = Role

      fields = ('name', )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.fields['name'].label = "Role"

        self.helper.add_input(Submit('add_new_Role', 'Add', css_class='role_button'))
        self.helper.layout = Layout(
            Row(
                Column('name'),
            )
        )

我在我的模板中使用这样的表格：

{% extends 'main.html' %}
{% load crispy_forms_tags %}

{% block content %}
<div class="row">
  <div class="card col-md-6 ml-auto mr-auto">
    <div class="card-body">
      {% crispy role_form %}
    </div>
  </div>
</div>
<div id="role_list">
  {% include 'role_list.html' %}
</div>


{% endblock %}


{% block javascript %}
<script type="text/javascript">
  $(document).ready(function(){
    $("form").removeAttr("method");
    $('.role_button').attr("hx-post", '{% url "role_add" %}');
    $('.role_button').attr('hx-target', '#role_list');

  });
</script>

{% endblock %}

CDN 链接添加到 main.html 文件中。

我的理解是单击 ADD 按钮应该触发 POST 请求。但是发起了 GET 请求，这让我觉得 HTMX 部分根本不起作用

4

3 回答 3

0

执行此操作的典型方法是将hx-postandhx-target属性添加到form元素，而不是submit按钮。这将导致 HTMX 拦截表单上的提交事件，并将整个表单作为 AJAX 请求提交。

请参阅触发请求文档：

默认情况下，AJAX 请求由元素的“自然”事件触发：

  • 在提交事件上触发表单
于 2021-12-31T14:29:20.927 回答
0

经过太多的试验和错误，我找到了解决方案。原来 Django Crispy 表单创建一个输入type='submit'来创建提交按钮

但是，hx-post 仅在您有一个按钮type='submit'而不是输入以提交表单时才有效

于 2021-12-31T10:23:24.743 回答
0

正如@Mark 在他的回答中所说，我建议在您的模板上定义表单标签并将htmx内容放在上面：

<form hx-post={% url 'submit url' %}  <!-- Do not set action and method -->
 ...other htmx attributes>
    {% crispy form %}    
</form>

并将您的表单助手设置为不呈现表单标签

self.helper.form_tag = False

顺便说一句，如果您已将 htmx 设置为csrf自动发送，（有关详细信息，请参阅此处）最好csrf在表单助手中禁用

self.helper.disable_csrf = True  # no need, request is sent via htmx
于 2022-01-07T10:31:59.163 回答