javascript - 使用ajax提交表单但得到 "Illegal Invocation"

Question

我尝试通过ajax提交表单，下面是表单。

<form class="form-vertical" method="POST" id="request-form" action="/post_handler?request=add_data" enctype="multipart/form-data">
  <div class="form-group">
    <label for="date_inp" class="control-label">Date</label>
      <input class="form-control hasDatepicker" id="datepicker" type="text" name="date">
    </div>
  </div>
  <div class="form-group">
    <label for="file_inp">Upload File</label>
    <div>
      <input class="form-control" id="file_inp" type="file" placeholder="Upload File" name="file">
    </div>
  </div>
  <div class="form-group">
    <div>
      <button type="submit" class="btn btn-default submit-button" onclick="on_click_form_submit(event);">Submit</button>
    </div>
  </div>
</form>

这是点击功能。

on_click_form_submit = function(event) {

    event.preventDefault();

    var form_data = new FormData($('#request-form')[0]),
        form_url = '/' + $('#request-form')[0].action.split('/').pop();

    console.log('url: ' + form_url);
    $.ajax({
            url: form_url,
            type: 'POST',
            data: form_data,
            dataType: 'json',
            encode: true
        })
        .done(function(response) {
            alert(response);
        })
        .fail(function(xhr, status, error) {
            alert(xhr.responseText);
        });

    return false;
};

当我点击提交时，它会报告

Uncaught TypeError: Illegal invocation
  at add (jquery-1.9.1.js:7340)
  at buildParams (jquery-1.9.1.js:7392)
  at Function.jQuery.param (jquery-1.9.1.js:7360)
  at Function.ajax (jquery-1.9.1.js:7863)
  at Object.on_click_form_submit (spa.shell.js:301)

Answer 1

Per the docs , jQuery 的 $.ajax 接受:

Type: PlainObject or String or Array

因此，您的 form_data 应该是其中一种格式 - 它不应该是 FormData 的实例化。这取决于您的后端的期望，但一种选择是使用 serializeArray() 将表单的值转换为对象:

on_click_form_submit = function(event) {

  event.preventDefault();

  var form_data = $('#request-form').serializeArray(),
    form_url = '/' + $('#request-form')[0].action.split('/').pop();

  console.log('url: ' + form_url);
  $.ajax({
      url: form_url,
      type: 'POST',
      data: form_data,
      dataType: 'json',
      encode: true
    })
    .done(function(response) {
      alert(response);
    })
    .fail(function(xhr, status, error) {
      alert(xhr.responseText);
    });

  return false;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-vertical" method="POST" id="request-form" action="/post_handler?request=add_data" enctype="multipart/form-data">
  <div class="form-group">
    <label for="date_inp" class="control-label">Date</label>
    <input class="form-control hasDatepicker" id="datepicker" type="text" name="date">
  </div>
  </div>
  <div class="form-group">
    <label for="file_inp">Upload File</label>
    <div>
      <input class="form-control" id="file_inp" type="file" placeholder="Upload File" name="file">
    </div>
  </div>
  <div class="form-group">
    <div>
      <button type="submit" class="btn btn-default submit-button" onclick="on_click_form_submit(event);">Submit</button>
    </div>
  </div>
</form>