繁体   English   中英

从Django视图执行jQuery函数?

[英]Execute jQuery function from a Django view?

我有一个退出视图,当用户成功退出时,我想执行一个jQuery函数,上面写着“您已经退出!”。 在烤面包中弹出。 如何从Django视图调用jQuery函数。 我从这里获得了jQuery代码: http : //shawntabai.com/wp/2011/09/06/toast-notifications-using-jquery/

VIEWS.PY:

def signout(request):
    logout(request)
    return HttpResponseRedirect(reverse(index))

jQuery函数存储在我的标头中:

<head>
<script type="text/javascript">
    function toast(sMessage)
{
    var container = $(document.createElement("div"));
    container.addClass("toast");

    var message = $(document.createElement("div"));
    message.addClass("message");
    message.text(sMessage);
    message.appendTo(container);

    container.appendTo(document.body);

    container.delay(100).fadeIn("slow", function()
    {
        $(this).delay(2000).fadeOut("slow", function()
        {
            $(this).remove();
        });
    });
}
</script>
<head>

我可以做这样的事情:

def signout(request): 
    logout(request) 
    return HttpResponseRedirect(reverse(index, "$(document).ready(function(){toast('test');});"))

我建议改用Django消息-https: //docs.djangoproject.com/en/dev/ref/contrib/messages/

您可以检查模板中是否填充了“消息”,并显示吐司通知。

将此添加到您的脚本标签:

$(document).ready(function(){
  toast("test");
});

不幸的是,我不了解JQuery,因此这将是更多的伪代码y /原型y,但这是实现它的最佳方法。 (JQuery用户,可以使用实际的JQuery进行修复)

在您的注销链接上,添加一个对视图执行AJAX请求的事件处理程序:

$('a').click(function() {
   Ajax.send('/path/to/logout/', {
      onSuccess: function(response) {
         toast(response.responseText, function() {
             window.location = '/path/to/index/';
         });
      },
      onFailure: function(response) {
         toast(response.responseText);
      }
   });
})

请注意,我在toast()添加了第二个参数。 您需要将烤面包更改为:

function toast(sMessage, action)
{
    var container = $(document.createElement("div"));
    container.addClass("toast");

    var message = $(document.createElement("div"));
    message.addClass("message");
    message.text(sMessage);
    message.appendTo(container);

    container.appendTo(document.body);

    container.delay(100).fadeIn("slow", function()
    {
        $(this).delay(2000).fadeOut("slow", function()
        {
            $(this).remove();
            if (action) action();
        });
    });
}

最后,视图:

def signout(request):
    if logout(request):
        return HttpResponse('You have successfully logged out!')
    else:
        return HttpResponseBadRequest('There was an error logging out.')

解答:我结合了两个回答来得到答案:

  1. 在您的标头中使用jQuery插件http://shawntabai.com/wp/2011/09/06/toast-notifications-using-jquery/
  2. 使用Django消息框架: https : //docs.djangoproject.com/en/1.4/ref/contrib/messages/
  3. 将{{message}}插入jQuery脚本。

查看

def signout(request):
    logout(request)
    messages.add_message(request, messages.INFO, 'Signout Successful.')
    return HttpResponseRedirect(reverse(index))

INDEX.html

{% if messages %}
    {% for message in messages %}
        <script type="text/javascript">
            $(document).ready(function(){toast("{{ message }}");});
        </script>
    {% endfor %}
{% endif %}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM