提交带有jQuery函数的表单

时间:2012-09-16 05:25:09

标签: javascript jquery html ajax django

我有一个html页面,其中包含一个表单,我想在表单成功提交时,显示以下div:

<div class="response" style="display: none;">
  <p>you can download it<a href="{{ link }}">here</a></p>
</div>

我也有一个jquery函数:

    <script type="text/javascript">
        $(function() {
            $('#sendButton').click(function(e) {            
                e.preventDefault();
                var temp = $("#backupSubmit").serialize();
                validateForm();
                $.ajax({
                    type: "POST",
                    data: temp,
                    url: 'backup/',
                    success: function(data) {
                        $(".response").show();
                    }
                });
            });
        });

</script>

在我的views.py(代码隐藏)中,我创建了一个链接并将其传递给html页面。我有:

def backup(request):
    if request.is_ajax():
        if request.method=='POST':
            //create a link that user can download a file from it. (link)
            variables = RequestContext(request,{'link':link})
            return render_to_response('backup.html',variables)
        else:
            return render_to_response('backup.html')
    else:
        return render_to_response("show.html", {
            'str': "bad Request! :(",
            }, context_instance=RequestContext(request))
backup = login_required(backup)

我的问题:我的视图似乎没有执行。它没有显示我发送到此页面的链接。似乎只执行了jQuery函数。我糊涂了。我怎样才能让它们都执行(我的意思是jQuery函数,然后是我在这个函数中设置的url,它使我的视图被执行。)

我不知道如何使用序列化功能。无论何时我搜索,他们写道:

  

.serialize()方法以标准URL编码表示法创建文本字符串,并生成查询字符串,例如“a = 1&amp; b = 2&amp; c = 3&amp; d = 4&amp; e = 5。

我不知道何时必须使用它,而我可以在request.Post [“field name”]中访问我的表单字段。我不知道成功的数据应该是什么:在我的情况下的功能(数据)。

非常感谢你的帮助。

1 个答案:

答案 0 :(得分:1)

您必须从ajax post函数中获取并显示data,其中data是您通过DJango服务器呈现的响应,例如:

t = Template("{{ link }}")
c = Context({"link": link})
t.render(c):

你的JS / jQuery应该是这样的:

<script type="text/javascript">
    $(function() {
        $('#sendButton').click(function(e) {            
            e.preventDefault();
            var temp = $("#backupSubmit").serialize();
            validateForm();
            $.ajax({
                type: "POST",
                data: temp,
                url: 'backup/',

                success: function(data) {
                    // 'data' is the response from your server
                    // (=the link you want to generate from the server)

                    // Append the resulting link 'data' to your DIV '.response'
                    $(".response").html('<p>you can download it<a href="'+data+'">here</a></p>');

                    $(".response").show();
                }
            });
        });
    });
</script>

希望这有帮助。