Django：将带有表单的alluath模板加载到div加载其他内容

Posted 2023-02-24

【中文标题】Django：将带有表单的alluath模板加载到div加载其他内容

【英文标题】：Django: loading alluath template with form to div loads additional things

【发布时间】：2018-10-02 08:02:54

【问题描述】：

我有一个简单的帐户管理网站。我有一些 div，我使用 jQuery load() 函数向其中加载了一些其他东西（其他 div、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 对象，但我不知道为什么。当我在浏览器中打开帐户/密码/更改/时，它会正常显示。

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

【参考方案1】：

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

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

只需使用 iframe：

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

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