Django CBV表单提交返回的JSON显示为新页面

Question

我正在使用 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": "请使用不同的电子邮件服务提供商"}

是什么导致了这个问题 - 我该如何解决？

Answer 1

此代码使用相关图像填充模态。 它与您的问题不完全相同，但这确实有效，因此应该可以通过修改进行转移。

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"),

意见

class 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

画廊_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">&times;</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，但同样，我认为这个原则很好