集成Jquery和Django

时间:2012-03-20 12:01:31

标签: django jquery-ui

如何将Jquery-ui对话框与django函数集成?

我的意思是......我在jquery-ui对话框中编写了一个表单。我希望jquery在提交此表单时调用django函数,但不传递URL中的任何变量。有可能吗?

有人能给我一些线索吗?

由于

[增订] 我只是发现代码是正确的,但Django是返回错误403,可能是因为CSRF保护。如何在不禁用此保护的情况下修复它? 这是我的jquery-ui代码:

$( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 430,
        width: 350,
        modal: true,
        draggable: false,
        resizable: false,
        buttons: {
            "Confirm": function() {
                var bValid = true;
                allFields.removeClass( "ui-state-error" );

                bValid = bValid && checkLength( name2, "name2", 6, 80 );
                bValid = bValid && checkLength( email, "email", 6, 80 );


                bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "some-error-msg..." );

                if ( bValid ) {
                    $( "#users tbody" ).append( "<tr>" +
                        "<td>" + name.val() + "</td>" + 
                        "<td>" + email.val() + "</td>" + 
                        "<td>" + name2.val() + "</td>" +
                    "</tr>" ); 


                    $.post("", {'csrfmiddlewaretoken':'{csrf_token}}'}, function(data) {

                        alert(data);// ---> data is what you return from the server
                    }, 'json');

                    $( this ).dialog( "close" );
                }
            },
            "Cancel": function() {
                $( this ).dialog( "close" );
            }
        },

        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

2 个答案:

答案 0 :(得分:1)

您需要使用POST HTTP方法而不是GET。 POST将不会在URL中添加参数base64-encoded,并且它们在URL中不可见。

只需以json格式example序列化任何Django对象,然后通过视图返回json。

Full stack example(对不起网站上令人不快的颜色)。

答案 1 :(得分:0)

你需要2件才能完成这项工作。

  • 在django端,编写要在表单提交时调用的函数。保持它的好地方是views.py。现在向urls.py添加一个条目,以便django知道在访问该URL时调用此函数。
  • 在客户端,捕获表单的cubmit事件,并对您在上面的urls.py中添加的网址进行ajax调用。

这是您需要做的非常简单的概述。如果你遇到某个地方,请尝试使用django教程获取第一部分的帮助,然后使用jquery ajax文档获取第二部分的帮助。

相关问题