javascript - Django CBV 表单提交返回 JSON 显示为新页面
问题描述
我正在使用 Django 3.2
我正在创建一个简单的时事通讯订阅表格。表单提交将 JSON 返回到前端,然后应该使用它来更新页面的某些部分 - 但是,当我发布表单时,JSON 字符串在新页面上显示为文本。
这是调用视图的路由:
urlpatterns = [
# ...
path('subscription', BlogsubscriberCreateView.as_view(), name='subscription-post'),
# ...
]
这是我基于班级的观点:
class BlogsubscriberCreateView(CreateView):
model = BlogPostSubscriber
form_class = BlogSubscriptionForm
http_method_names = ['post']
def post(self, request, *args, **kwargs):
form = self.form_class(request.POST)
content_type = "application/json"
if not form.is_valid():
return JsonResponse({'ok': 0, 'msg': form.errors.get('email')[0]}, content_type=content_type, status=200)
else:
email = form.cleaned_data.get("email")
subscriber = BlogPostSubscriber(email= email)
subscriber.save()
# send email to confirm opt-in
email_message='Please confirm your subscription'
message = f"A confirmation email has been sent to {email}. Please confirm within 7 days"
return JsonResponse({'ok': 1, 'msg': message}, content_type=content_type, status=200)
以下是包含表单的 HTML 片段:
<div class="col-lg-8 content">
<form id="blog-subscription" action="{% url 'blog:subscription-post' %}" method="post">
{% csrf_token %}
<br />
<h3>Some title</h3>
<br />
<p>Lorem ipsum ...</p>
<br />
<h4 id='submit-response-h4'>SUBSCRIBE TO OUR BLOG</h4>
<div id="submit-response" class="input-group">
<span id="email-error"></span>
<input type="email" id="blog-subscription-email" name="email" class="form-control" placeholder="Enter your email" required="true">
<span class="input-group-btn">
<button id="subscribe-btn" class="btn" type="submit">Subscribe Now</button>
</span>
</div>
</form>
这是负责更新页面的 Javascript:
$().ready(function() {
$('form#blog-subscription button#subscribe-btn.btn').on('click', function(e){
let email = $('#blog-subscription-email').val().trim().toLowerCase();
if (email.length && isValidEmail(email)){
e.preventDefault();
$.post({
url: "{% url 'blog:subscription-post' %}",
dataType: 'json',
data: {
email: email,
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function (data){
let ok = data.ok;
if (ok){
if ($('#submit-response-h4').length){
$('#submit-response-h4').remove();
}
$('#submit-response').text(data.msg);
}
else{
$('#email-error').text(data.msg);
}
}
});
}
});
});
我在我的 Javascript 中放置了一个警告注释,并意识到它根本没有被调用。我不明白发生了什么 - 如果没有调用 Javascript - JQuery 怎么知道将 post 函数调用到正确的 URL?(表单没有动作属性!)。
回复的典型示例(带有错误电子邮件)显示在http://example.com/path/to/subscription
:
{"ok": 0, "msg": "请使用不同的电子邮件服务提供商"}
是什么导致了这个问题 - 我该如何解决?
解决方案
此代码使用相关图像填充模式。它与您的问题不完全相同,但这确实有效,因此应该可以通过修改进行转移。
js
function modal_form(form_url){
var modal_id = 'modal-form';
$.ajax({
type: 'GET',
url: form_url,
cache: false,
success: function (data, status) {
$('#carouselModal').html(data);
$('#carouselModal').modal('show');
}
});
}
html
<img class="d-block w-100" src="{% thumbnail image.file 'carousel_main' subject_location=image.file.subject_location %}" alt="{{ organisation.name }} - {{ forloop.counter }}" itemprop="image" onclick="modal_form('{% url "providers:carousel-modal" organisation.id "carousel_photos" %}')">
网址
path('carousel-modal/<int:pk>/<str:gallery>/', views.CarouselModal.as_view(), name="carousel-modal"),
意见
类 CarouselModal(DetailView): model = models.Organisation template_name = "providers/extras/gallery_modal.html"
def get_context_data(self, **kwargs):
ctx = super().get_context_data(**kwargs)
gallery = self.kwargs['gallery']
if gallery == 'carousel_photos':
ctx['images'] = self.object.carousel_photos
elif gallery == 'propertyimages':
ctx['images'] = self.object.propertyimages_set.all()
if self.request.user_agent.is_mobile:
ctx['image_size'] = 'mobile_modal_carousel_slide'
elif self.request.user_agent.is_tablet:
ctx['image_size'] = 'tablet_modal_carousel_slide'
else: ctx['image_size'] = 'modal_carousel_slide'
try: ctx['show_all'] = self.object.is_premium
except: ctx['show_all'] = False
return ctx
Gallery_modal.html
{% load static thumbnail %}
<div class="modal-dialog carousel-modal" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="mainCarousel" class="carousel slide thumbnail-carousel" data-ride="carousel">
<div class="thumbnail-carousel__main">
<div class="carousel-inner">
{% for image in images %}
{% if show_all or forloop.first %}
<div class="carousel-item{% if forloop.first %} active{% endif %}">
<img class="d-block w-100" width="100%" src="{% thumbnail image.file image_size subject_location=image.file.subject_location %}" alt="{{ image.name }}" itemprop="image" >
</div>
{% endif %}
{% empty %}
{% include 'providers/detail/stock_carousel.html' %}
{% endfor %}
</div>
{% if show_all and images.count > 1 %}
<a class="carousel-control-prev" href="#mainCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#mainCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
{% endif %}
</div>
</div>
</div>
</div>
</div>
我刚刚意识到在这个例子中我没有返回一个 JSONResponse,但是我认为这个原则是好的
推荐阅读
- sql - 如果 UNION SQL Server 时表中不存在列,则拉 NULL
- node.js - 在 docker 环境中成功 CI 后如何部署到自定义服务器?
- laravel - 使用 Laravel 和 Amazon s3 显示“安全”图像的最快方法是什么?
- git - 是否有一个 git 配置文件来告诉每个分支要合并什么
- multithreading - python3中的多线程
- uwp - Desktop App Converter Microsoft Store 验证错误
- c# - ComboBoxes 如何将字符串资源用于项目文本?
- elasticsearch - 可以多次添加/删除文档到索引使其不一致吗?
- excel - Excel 中的条件标准差
- mysql - 搜索(帽子)等产品。但我在 mysql 的产品表中有带有 (hat) 的产品名称。我想要与帽子或帽子类似的结果