Django：加载带有表单的 alluath 模板到 div 加载额外的东西

Question

我有一个简单的帐户管理网站。我有几个 divs，我使用 jQuery load() 函数加载了一些其他东西（其他 divs，django 形式和类似的东西），一切都很好。我想使用 django allauth 应用程序进行帐户管理，现在我正在尝试添加功能以将 password_change 模板加载到某些 div。此 password_change.html 模板如下所示：

<form method="POST" action="accounts/password/change/" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Submit" />
</form>

这是我要加载的模板

<div>
    <div>
        <div onclick="$('#item').load('accounts/password/change');">Change password</button>
    </div>

    <div id="item"></div>
</div>

点击按钮加载后，我看到了一些字典，而不是密码更改表单：

{"form": {"fields": {"oldpassword": {"widget": {"attrs": {"placeholder": "Current Password"}}, "value": null, "errors": [], "label": "Current Password", "help_text": ""}, "password1": {"widget": {"attrs": {"placeholder": "New Password"}}, "value": null, "errors": [], "label": "New Password", "help_text": ""}, "password2": {"widget": {"attrs": {"placeholder": "New Password (again)"}}, "value": null, "errors": [], "label": "New Password (again)", "help_text": ""}}, "field_order": ["oldpassword", "password1", "password2"], "errors": []}, "html": "\n \n  
Current Password: 
\"Current

\n
New password: 
\"New

\n
New password (again): 
\"New

\n  
\"Submit\"
\n
"}

我认为它是传递给模板的纯 Django 对象，但我不知道为什么。当我在我的网络浏览器中打开 accounts/password/change/ 时，它显示正常。

我不确定是 django、allauth 还是 jQuery 的问题。如果有任何提示，我将不胜感激。

Answer 1

$.load() 触发一个 ajax 请求，这意味着 django-allauth 将响应 JSON 响应。

如果您想在此处嵌入密码更改表单，您可以执行以下两项操作之一：

只需使用 iframe:

<div id="item">
    <iframe src="accounts/password/change/"></iframe>
</div>

为 JSON 响应中的字段构建并绑定自定义表单

Django：加载带有表单的 alluath 模板到 div 加载额外的东西

Django: loading alluath template with form to div loads additional things

forms

django

jquery

django-templates

django-allauth