如何提交表單而不使用Django，Ajax，jQuery刷新頁面？

我是新手與Django合作。我需要簡單的例子。如何使用Django，Ajax，jQuery提交表單（post）而無需刷新頁面？如何提交表單而不使用Django，Ajax，jQuery刷新頁面？

這是我的表，視圖和模板：（使用「的ModelForm」形式）

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


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

模板（形式的html代碼）

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

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

來源

2012-07-25 webfanks

，如果你打算使用一個Ajax使用jQuery你不應該從您的視圖返回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>

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

這樣你就把這個響應放在message div中。而不是返回純html，你應該返回json。

來源

2012-07-27 04:59:23 pahko

data.message在JS部分應該是JSON.parse（data）.message – rawbeans 2014-07-03 22:55:34

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

來源

2012-07-25 10:32:36

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

來源

2012-07-27 05:50:41

如何提交表單而不使用Django，Ajax，jQuery刷新頁面？

回答

相關問題