Ajax 在表单内调用？

Question

我有这个功能：

function deleteDocument(e, document_id, property_id) {
  e.preventDefault();
  $('#editDocumentLoader').css('display', 'flex');
  $.ajax({
    type: "POST",
    dataType: "json",
    url: window.location.protocol + "/profile/property/document/delete/" + document_id,
    data: {
      'document_id': document_id,
      'property_id': property_id,
      '_token': CSRF_TOKEN
    },
    cache: false
  }).done(function(response) {
    alert(response);
    if (response != "") {
      try {
        $('#document_table').html(response.data);
        $('#editDocumentLoader').hide();
      } catch (e) {
        console.log(e)
      }

    } else {
      console.log("no response");
    }
  }).fail(function(response) {
    console.log(response);
    if (response.status == 422) {
      var errors = response.responseJSON;
    }
  });
}

在我看来，form 里面有这个：

<button onclick="deleteDocument(event,{{$document->id}},{{$property->id}})"><i class="fa fa-times"></i></button>

由于某种原因，它提交了我的表单，然后我的 ajax 调用不起作用。有什么建议吗？

Answer 1

按钮的默认类型是提交： What is the default button type?

您有两个选择： 修改函数以返回 false 并将您的 html 更改为：

<button onclick="return deleteDocument(event,{{$document->id}},{{$property->id}})"><i class="fa fa-times"></i></button>

更改按钮类型：

<button type="button" onclick="deleteDocument(event,{{$document->id}},{{$property->id}})"><i class="fa fa-times"></i></button>

Answer 2

这几乎可以肯定是因为您没有处理表单的“提交”事件，只处理按钮的“点击”事件。

将按钮的类型属性设置为type="button"，这样它就不是自动提交按钮（如果你不指定它的默认类型是“提交”，这意味着任何点击它都会导致表单的“提交" 事件也会触发。因此，您的表单正在提交并执行完整的回发并在您的 ajax 调用有机会运行之前刷新页面（或者它确实运行了，但您永远看不到结果）。

<button type="button" onclick="deleteDocument(event,{{$document->id}},{{$property->id}})"><i class="fa fa-times"></i></button>

应该修复它。