2012-07-25 15 views
11

Jestem początkującym pracującym z django. Potrzebuję prostego przykładu. Jak przesłać formularz (wpis) bez odświeżania strony przy użyciu Django, Ajax, jQuery?Jak przesłać formularz bez odświeżania strony przy użyciu Django, Ajax, jQuery?

To jest moje poglądy i forma, szablon:

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 (formularz używając "ModelForm")

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


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

szablony (postać kodu 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> 

Odpowiedz

14

jeśli planujesz używać AJAX przedłożyć jQuery nie powinna powrócić html z widzenia .. Proponuję, aby to zrobić w zamian:

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> 

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

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

, więc w ten sposób wstawiasz odpowiedź w div message. zamiast zwracania zwykłego html powinieneś zwrócić json.

+0

data.message w sekcji JS powinien być JSON.parse (data) .message – rawbeans

1
$('#form-id').submit(function(e){ 
    $.post('your/url', $(this).serialize(), function(e){ ... }); 
    e.preventDefault(); 
}); 
6
<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> 
Powiązane problemy