如何使用 Django、Ajax、jQuery 在不刷新页面的情况下提交表单？

Posted 2023-02-24

技术标签:

【中文标题】如何使用 Django、Ajax、jQuery 在不刷新页面的情况下提交表单？【英文标题】：How to submit form without refreshing page using Django, Ajax, jQuery? 【发布时间】：2012-07-23 18:22:34 【问题描述】：

我是使用 django 的新手。我需要简单的例子。如何使用 Django、Ajax、jQuery 在不刷新页面的情况下提交表单（post）？

这是我的表单、视图和模板：

views.py

from django.shortcuts import *
from django.template import RequestContext
from linki.forms import *

def advert(request):
    if request.method == "POST":
        form = AdvertForm(request.POST)

        if(form.is_valid()):
            print(request.POST['title'])
            message = request.POST['title']

        else:
            message = 'something wrong!'


        return render_to_response('contact/advert.html',
                'message':message,
            context_instance=RequestContext(request))

    else:
        return render_to_response('contact/advert.html',
                'form':AdvertForm(),
            context_instance=RequestContext(request))

forms.py（使用“ModelForm”的表单）

from django import forms
from django.forms import ModelForm
from linki.models import Advert


class AdvertForm(ModelForm):
    class Meta:
        model = Advert

模板（表单 html 代码）

<html>
<head>

</head>
    <body>
    <h1>Leave a Suggestion Here</h1>
        % if message %
             message 
        % endif %
        <div>
            <form action="" method="post">% csrf_token %
                 form.as_p 
                <input type="submit" value="Submit Feedback" />
            </form>
        </div>
    </body>
</html>

【问题讨论】：

【参考方案1】：

如果您打算使用 jquery 的 ajax 提交，则不应从您的视图中返回 html。我建议您改为这样做：

html:

<html>
<head>
</head>
<body>
    <h1>Leave a Suggestion Here</h1>
        <div class="message"></div>
        <div>
            <form action="" method="post">% csrf_token %
                 form.as_p 
                <input type="submit" value="Submit Feedback" />
            </form>
        </div>
</body>
</html>

$('#form').submit(function(e)
    $.post('/url/', $(this).serialize(), function(data) ... 
       $('.message').html(data.message);
       // of course you can do something more fancy with your respone
    );
    e.preventDefault();
);

views.py

import json
from django.shortcuts import *
from django.template import RequestContext
from linki.forms import *

def advert(request):
    if request.method == "POST":
        form = AdvertForm(request.POST)

        message = 'something wrong!'
        if(form.is_valid()):
            print(request.POST['title'])
            message = request.POST['title']

        return HttpResponse(json.dumps('message': message))

    return render_to_response('contact/advert.html',
            'form':AdvertForm(), RequestContext(request))

这样您就可以将响应放在message div 中。您应该返回 json，而不是返回纯 html。

【讨论】：

JS部分的data.message应该是JSON.parse(data).message【参考方案2】：

<script type="text/javascript">
$(document).ready(function() 
    $('#form_id').submit(function()  // On form submit event
        $.ajax( // create an AJAX call...
            data: $(this).serialize(), // get the form data
            type: $(this).attr('method'), // GET or POST
            url: $(this).attr('action'), // the file to call
            success: function(response)  // on success..
                $('#success_div').html(response); // update the DIV
            ,
            error: function(e, x, r)  // on error..
                $('#error_div').html(e); // update the DIV
            
        );
        return false;
    );
);
</script>

【讨论】：

【参考方案3】：

$('#form-id').submit(function(e)
    $.post('your/url', $(this).serialize(), function(e) ... );
    e.preventDefault();
);

【讨论】：

【参考方案4】：

Here 是一个完美的教程。我将包括重要部分：

首先将this jQuery scripts 添加到main.js 并将其链接到您的页面。

将此代码添加到main.js（我将包含我的版本以发送博客评论）

// Submit post on submit
$('#comment-form').on('submit', function(event)
    event.preventDefault();
    create_post();
);

// AJAX for posting
function create_post() 
    $.ajax(
        url : "/blogcomment/", // the endpoint
        type : "POST", // http method
        data : 
            blog_id: blog_id,
            c_name : $('#comment-name').val(),
            c_email:  $('#comment-email').val(),
            c_text:  $('#comment-text').val(),
        , // data sent with the post request

        // handle a successful response
        success : function(json) 
            $('#comment-name').val(''); // remove the value from the input
            $('#comment-email').val(''); // remove the value from the input
            $('#comment-text').val(''); // remove the value from the input
            $('#comment-form').prepend("<div class='alert alert-success'><button type='button' class='close' data-dismiss='alert'>&times;</button>" + json.result +"</div>");
        ,

        // handle a non-successful response
        error : function(xhr,errmsg,err) 
            $('#comment-form').prepend("<div class='alert alert-danger'><button type='button' class='close' data-dismiss='alert'>&times;</button>Oop! Error happend!</div>"); // add the error to the dom
            //console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
        
    );

我的views.py 获得评论如下所示：

def get_blog_comment(request):
    if request.method == 'POST':
        blog_id = request.POST.get('blog_id') 
        user = request.POST.get('c_name')
        email = request.POST.get('c_email')
        comment = request.POST.get('c_text')
        date = jdatetime.datetime.now().strftime("%Y-%m-%d");
        response_data = 
        blogcomment = Comments(blog_id = blog_id, date = date, name = user, email = email, comment_text = comment)
        blogcomment.save()

        response_data['result'] = 'Success!!.'

        return HttpResponse(
            json.dumps(response_data),
            content_type="application/json"
        )
    else:
        return HttpResponse(
            json.dumps("nothing to see": "this isn't happening"),
            content_type="application/json"
        )

最后是 urls.py 的 url 部分，它没有包含在原始教程中：