如何使用 Django、Ajax、jQuery 在不刷新页面的情况下提交表单？
[英]How to submit form without refreshing page using Django, Ajax, jQuery?
问题描述
I am newbie working with django.
我是使用 django 的新手。 I need simple example.我需要简单的例子。 How to submit form (post) without refreshing page using Django, Ajax, jQuery?如何使用 Django、Ajax、jQuery 在不刷新页面的情况下提交表单（发布）？
This is my form, views and template:这是我的表单、视图和模板：
views.py视图.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") forms.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>
4 个解决方案
解决方案1
22 已采纳 2012-07-27 04:59:23
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:
<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视图.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.这样你就可以将响应放在message div 中。 instead of returning plain html you should return json.而不是返回纯 html 你应该返回 json。
解决方案2
7 2012-07-27 05:50:41
<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
2 2012-07-25 10:32:36
$('#form-id').submit(function(e){
$.post('your/url', $(this).serialize(), function(e){ ... });
e.preventDefault();
});
解决方案4
0 2018-11-14 06:47:51
Here is a perfect tutorial for it.这是一个完美的教程。 I'll include the important parts:我将包括重要部分：
first add this jQuery scripts to main.js and link it to your page.首先将此 jQuery 脚本添加到main.js并将其链接到您的页面。
Add this codes to the main.js (I'll include my version for sending blog comment)将此代码添加到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'>×</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'>×</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
}
});
}
my views.py for getting comment looks like this:我用于获取评论的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"
)
And finally the url part for urls.py which is not included in the original tutorial:最后是原始教程中未包含的urls.py的 url 部分：
path('blogcomment/', views.get_blog_comment, name='get_blog_comment'),
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.