web*_*nks 15 django ajax jquery
我是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>
pah*_*hko 16
如果你打算用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>
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))
这样你就可以把响应放在messagediv中了.而不是返回普通的HTML,你应该返回json.
<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>
| 归档时间： |
|
| 查看次数： |
27398 次 |
| 最近记录： |