javascript - 将输入值检索到 formData 对象中

Question

我正在使用 laravel 框架以及 JQuery 和 AJAX 来将新条目保存到我的数据库中，但是由于验证失败，我无法捕获输入的值(某些字段是必需的，但我似乎无法正确收集数据，使它们为空)。

这是错误:

errors: {…}​​
body: Array [ "The body field is required." ]​​
image: Array [ "The image field is required." ]​​
title: Array [ "The title field is required." ]​​
<prototype>: Object { … }​
message: "The given data was invalid."

这是我的 jQuery 代码:

$('.form_new_button').click(function() {
  var linked_entry = $(this).attr("data-link");

  $.ajaxSetup({
    headers: {
      'X-CSRF-Token': $('meta[name=csrf-token]').attr('content')
    }
  });

  switch (linked_entry) {
    case "sliders":
      console.log('new slider button clicked');
      var form = $('new_slider_form').get(0);
      $.ajax({
        async: true,
        url: '/sliders',
        type: 'POST',
        data: new FormData(form),
        dataType: 'JSON',
        processData: false,
        contentType: false,
        success: function(data) {
          $('.form_valid_container').html('<span class="form_valid_text">✓ ' + data.success + '</span>');
          form.trigger("reset");
          console.log(data.success, data.errors);
        },
        error: function(data) {
          var errors = data.responseJSON;
          console.log(errors);
          $.each(errors, function() {
            $('.form_error_container').html('<span class="form_error_text">✘ ' + errors.message + '</span>')
          });
        }
      });
      break;

    default:
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这是我用来用数据填充输入字段的表单模式:

<div class="modal_overlay_maincontainer closeable form_new_modal" data-link="sliders">
  <form id="new_slider_form" class="modal_container" method="POST">
    <i class="close fa fa-times-circle" title="Cerrar"></i>
    <h2 class="modal_title">Nueva Diapositiva</h2>
    <div class="modal_body_container">
      <div class="modal_body_check_container">
        <span class="modal_body_options_title">Visible</span>
        <input class="modal_body_check" name="isVisible" type="checkbox" title="La diapositiva se subirá al pasador de diapositivas" required>
      </div>
      <div class="modal_body_check_container">
        <span class="modal_body_options_title">Imagen</span>
        <input type="file" name="image" required>
      </div>
      <input class="modal_input" type="text" name="title" placeholder="Titulo de la diapositiva" required>
      <textarea class="modal_input_textarea" name="body" placeholder="Contenido de la diapositiva" required></textarea>
    </div>
    <div class="modal_footer_container">
      <button class="modal_footer_add_button form_new_button" type="button" data-link="sliders" title="Crear nueva entrada">Crear</button>
      <button class="modal_footer_reset_button form_reset_button" type="button" title="Resetear los campos">Reset</button>
    </div>
  </form>
</div>

Answer 1

尝试

var form = $('new_slider_form').get(0);
$.ajax({
  type: "POST",
  async: true,
  url: '/sliders',
  data: $(form).serialize(),
  success: function(data) {
    $('.form_valid_container').html('<span class="form_valid_text">✓ ' + data.success + '</span>');
    form.trigger("reset");
    console.log(data.success, data.errors);
  },
  error: function(data) {
    var errors = data.responseJSON;
    console.log(errors);
    $.each(errors, function() {
      $('.form_error_container').html('<span class="form_error_text">✘ ' + errors.message + '</span>')
    });
  }
});