如何使用 jquery-ui 和 Django 创建模式登录表单

Posted 2023-02-24

【中文标题】如何使用 jquery-ui 和 Django 创建模式登录表单

【英文标题】：How to create modal login form using jquery-ui and Django

【发布时间】：2012-03-22 03:13:59

【问题描述】：

我正在编写一个 django web 应用程序并使用 jquery-ui 作为用户界面。我正在使用 django-registration 来处理用户注册。

基本上，我想要做的不是有一个单独的登录页面，而是我希望登录页面成为一个模式对话框，以便您单击一个链接，如果您需要登录，一个弹出窗口出现，您可以从那里登录。对于这一部分，我使用jquery-ui modal form，基本上只是显示一个通常隐藏的登录表单。

但是，如果页面的 url 看起来像这样，我只能让它工作：

url(r'^$',
        auth_views.login,
        'template_name': 'index.html'),

因为我希望在用户想要做一些需要登录的事情时弹出登录模式窗口，所以我需要在多个页面上使用它。但我不想让所有的网址都像上面那样。

我在网站上看到了另一个解决该问题的问题：Django authentication and Ajax - URLs that require login 但我不完全理解答案。我对 Django 和 javascript 还很陌生，所以想知道是否有人可以提供更多指导？

这是表单的“index.html”部分：

<div id="dialog-form" title="LOGIN">    
        <form method="post" action="?next= next|default:"/" ">
        % csrf_token %
        <dl>
        <dt><label for="id_username">Username:</label>% if form.username.errors % <span class="error"> form.username.errors|join:", " </span>% endif %</dt>
        <dd> form.username </dd>
        <dt><label for="id_password">Password:</label>% if form.password.errors % <span class="error"> form.password.errors|join:", " </span>% endif %</dt>
        <dd> form.password </dd>
        <dt><input type="submit" value="Log in" /></dt>
        </dl>
        </form> 
    </div>
    <button id="login">LOGIN</button>

这是javascript：

<script>
$(function() 

    $( "#dialog-form" ).dialog(
        autoOpen: false,
        height: 500,
        width: 550,
        modal: true,
        buttons: 
            Close: function() 
                $( this ).dialog( "close" );
            
        ,
        close: function() 
            allFields.val( "" ).removeClass( "ui-state-error" );
        
    );

    $( "#login" ).click(function() 
            $( "#dialog-form" ).dialog( "open" );
        );
);
</script>

提前感谢您的帮助。

【参考方案1】：

登录模态框可以使用jqueryui；我已经用过了。检查这个http://jsfiddle.net/paragr/LNBEY/ 但是你为什么不试试这个https://github.com/kylefox/jquery-modal 或http://www.bitrepository.com/ajax-login-modal-box.html

【参考方案2】：

这不是一个完整的答案，因为我以前从未这样做过，但是：你希望表单将发布请求数据发送到 auth_views.login - 所以你应该将表单操作设置为此地址 + 一些将重定向的下一个数据u 成功登录后。我想查看 django auth soruce 可能会有所帮助。在 djangosites.org 上，您可以找到带有源代码的项目，例如 https://github.com/znc-sistemas/python-people - 每个页面上都有一个登录表单示例 - 它没有隐藏，但没关系。作者使用上下文处理器将登录表单放入每个请求上下文数据中。我相信阅读代码可以帮助你。