[英]Submit Django HTML form with Ajax
这是我第一次尝试使用 Ajax 提交表单。
这是我的代码:
index.html (声明表格的地方):
form method="post" role="form" class="email-form" id="contact_me">
{% csrf_token %}
<div class="form-row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required />
</div>
<div class="col-md-6 form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required />
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required />
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" placeholder="Message" required /></textarea>
</div>
<div class="mb-3" id="thankyou">
</div>
<div class="text-center"><button type="submit">Send Message</button></div>
</form>
表单提交后有一个保留显示消息。
视图.py:
def send_message(request):
if request.is_ajax():
sender_name = request.POST.get('name')
sender_email = request.POST.get('email')
message_subject = request.POST.get('subject')
message_text = request.POST.get('message')
html_message = render_to_string('contact_template.html', {'sender_name': sender_name, 'sender_email': sender_email, 'message_subject': message_subject, 'message_text': message_text})
email_subject = 'Message from website visitor'
email_from = 'me@mygmail.com'
email_to = ['me@mydomain.com']
send_mail(email_subject, '', email_from, email_to, html_message=html_message)
response = {
'thankyou': 'Your message has been sent. Thank you!'
}
return JsonResponse(response)
网址.py:
path('sendmessage/', views.send_message, name='send_message'),
以及 Ajax 脚本(index.html):
<script>
$('#contact_me').submit(function(e){
e.preventDefault()
$.ajax({
type : "POST",
url : "/sendmessage/",
data: {
sender_name : $('#name').val(),
sender_email : $('#email').val(),
message_subject : $('#subject').val(),
message_text : $('#message').val(),
csrfmiddlewaretoken : '{{ csrf_token }}',
datatype : "json",
},
success: function(data){
$('#thankyou').html('<div class="sent-message">' + data.msg + '</div>')
},
});
});
</script>
但是当我填写表格并单击提交时,页面正在重新加载(但它不应该)并且没有发送 email,没有显示感谢消息。
请协助。
编辑:
我在脚本中发现了一些缺失的“,”并编辑了“urls.py”,现在我收到了电子邮件,但是:
在 email 中,我看到发件人姓名、email 地址等为“无”。
未显示感谢消息。 我看到“未定义”。 实际上我不知道如何在脚本中包含我需要的完整 html 标签。
JavaScript 中的参数名称与视图不匹配。 这就是这里的问题。 如下修改您的 AJAX 脚本以解决该问题:
<script>
$('#contact_me').submit(function(e){
e.preventDefault()
$.ajax({
type : "POST",
url : "/sendmessage/",
data: {
name : $('#name').val(),
email : $('#email').val(),
subject : $('#subject').val(),
message : $('#message').val(),
csrfmiddlewaretoken : '{{ csrf_token }}',
datatype : "json",
},
success: function(data){
$('#thankyou').html('<div class="sent-message">' + data.msg + '</div>')
},
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.