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属性设置为type="button"，使其不是自动提交按钮（默认类型，如果您不指定它是“提交”，这意味着任何单击它将导致表单的“提交”事件也会触发。因此，您的表单正在提交并执行完整的回发并在您的ajax调用有机会运行之前刷新页面（或者它可能会运行，但您从未看到结果）。

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

应该修复它。

Ajax调用里面的表单？

2 个答案: