如何使用Django、Ajax和jQuery提交表单而不刷新页面?

I am newbie working with django. I need simple example. How to submit form (post) without refreshing page using Django, Ajax, jQuery?

我是django的新手。我需要简单的例子。如何使用Django、Ajax和jQuery提交表单(post)而不刷新页面?

This is my form, views and template:

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

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 (form using "ModelForm")

形式。py(使用“ModelForm”形式)

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


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

TEMPLATES (form html code)

模板(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>

3 个解决方案

#1

if you are planning to use an ajax submit with jquery you should not return html from your view.. I propose you to do this instead:

如果您打算使用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>

the js

js的

$('#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();
});

the views.py

的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))

so that way you put the response in the message div. instead of returning plain html you should return json.

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

#2

<script type="text/javascript">
$(document).ready(function() {
    $('#form_id').submit(function() { // catch the form's 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();
});

#1