时间戳

首页 > 解决方案 > jQuery：使用 jQuery 保存表单会使表单无效

javascript - jQuery：使用 jQuery 保存表单会使表单无效

问题描述

我想保存一个包含图像的表单。

如果没有 jQuery，表单会按预期保存，但是，在“ js-product_image-create-form”函数下方添加会创建无效表单，但同时，json 响应状态为：<JsonResponse status_code=200, "application/json">

表单在视图中无效（在下面打印“无效”）和 jQuery 中的“无效”。

然而，

删除class="js-product_image-create-form"，在视觉上我得到带有 a 的 jsonvalid form = True以及函数打印"valid"

为什么表格在一种情况下有效但在另一种情况下无效？

使用 Django 视图：

def save_product_image_form(request, form, template_name):
    data = dict()
    if request.method == 'POST':
        if form.is_valid():
            form.save()
            data['form_is_valid'] = True
            print("valid")
            product_image = ProductImage.objects.all()
            data['html_product_image_list'] = render_to_string('product_image/includes/partial_product_image_list.html', {
                'product_image': product_image
            })
        else:
            data['form_is_valid'] = False
            print("invalid")
    context = {'form': form}
    data['html_form'] = render_to_string(
        template_name, context, request=request)
    return JsonResponse(data)


def product_image_create(request):
    if request.method == 'POST':
        form = ProductImageForm(request.POST, request.FILES)
    else:
        form = ProductImageForm()
    return save_product_image_form(request, form, 'product_image/includes/partial_product_image_create.html')


$(function() {
  var saveForm = function() {
    var form = $(this);
    $.ajax({
      url: form.attr("action"),
      data: form.serialize(),
      type: form.attr("method"),
      dataType: 'json',
      success: function(data) {
        if (data.form_is_valid) {
          alert("I am valid");
          $("#product_image-table tbody").html(data.html_product_image_list);
          $("#modal-product_image").modal("hide");
        } else {
          alert("I am invalid !");
          $("#modal-product_image .modal-content").html(data.html_form);
        }
      }
    });
    return false;
  };
  $("#modal-product_image").on("submit", ".js-product_image-create-form", saveForm);
});
{% load crispy_forms_tags %}
<form method="post" action="{% url 'image_create' %}" class="js-product_image-create-form"
   enctype="multipart/form-data">
  {% csrf_token %}
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Add a new Product Image</h4>
  </div>
  <div class="modal-body">
    {% crispy form %}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-secondary">Add Product Image</button>
  </div>
</form>

标签： javascriptjquerydjangoforms

解决方案

IIRC，二进制数据（例如图像）需要作为多部分表单数据发送。如果要将其作为 json 发送，则必须先对图像进行 base64 编码，然后再将其发送到服务器，然后在服务器上解码图像并使用 storages api 保存。

当您删除类时它会起作用，因为 jQuery 不再控制表单，而是{% url 'image_create' %}使用 multipart 将数据同步发送到您的 url（请参阅您的action=和enctype=html 表单属性）。

推荐阅读