javascript - 关于最接近、提交和 AJAX PUT 请求的问题

Question

我在停止表单提交时遇到问题。这是上下文的 html(顺便说一下，我正在使用 EJS):

<form class="edit-form" id="edit-review-form<%= review._id %>" action="/products/<%= product._id %>/reviews/<%= review._id %>" method="POST">
<div class="form-group">
    <input class="form-control" type="text" disabled value="<%= currentUser.username %>">
</div>
<div class="form-group">
    <input class="form-control" type="text" name="review[subject]" value="<%= review.subject %>" required>
</div>
<div class="form-group">
    <input type="number" name="review[rating]" id="rating" class="rating" value="<%=review.rating %>" required/>
</div>
<div class="form-group">
    <textarea class="form-control" name="review[text]" placeholder="<%= review.text %>" form="edit-review-form<%= review._id %>" rows="5" cols="70"><%= review.text %></textarea>
</div>
<div class="form-group">
</div>
<button class="reviewButton btn-edit-submit">Edit</button>

这是我的 AJAX 以及一个脚本，行间有注释解释

$(".edit-form").submit(function (event) { // Why does this not? On the developers console this does selects the form, but doesn't stops it from submitting...
    event.preventDefault();
    let formData = $(this).serialize();
    let formAction = $(this).attr("action");
    // console.log(formData);
    // console.log(JSON.stringify(formData));
    $.ajaxSetup({
        headers: {"X-CSRF-Token": $("#_csrf").val()}
    });
    $.ajax({
        context: this, /* setting context for ajax callbacks*/
        url: formAction,
        data: formData,
        type: "PUT",
        dataType: "json"
        })
        .done(function(data) {
        if (data) {
            console.log("Success! = " + JSON.stringify(data));
        }
        }).fail(function(data) {
        console.log("Something went wrong: " + data.responseText);
    });
    return false;
});

var editReviews = document.getElementsByClassName('btn-edit-submit');
$('.collapse').on("shown.bs.collapse", function(){
 //triggers when div is collapse
    console.log("collapsed in"); // Works after collapse is finished
    for (var i = 0; i < editReviews.length; i++) {
        editReviews[i].addEventListener('click', function(event) { // editReviews works in the dev console and every button is selected
            event.preventDefault();
            // alert("clicked"); // This alert is working,
            // PUT Request form
            this.closest("form").submit();
        });
    }
});

此外，如果我从终端提交表单，它不会提交触发 POST 错误的表单(因为它实际上是一个 put 请求)，但 AJAX 会通过，如果我单击按钮，它会提交我并启动错误。有什么想法吗？

编辑:也尝试过:

for (var i = 0; i < editReviews.length; i++) {
    editReviews[i].addEventListener('click', function(event) { // editReviews works in the dev console and every button is selected
        event.preventDefault();
        // alert("clicked"); // This alert is working,
        // PUT Request form
        this.closest("form").submit();
    });
}

但是也没有用。

我觉得我还需要提一下，我使用 .closest 选择器的原因是 View 文件中有多种类似的形式。

编辑:谢谢Basmar，尝试了你的建议:

var submitEditForm = function(form) {
    form.submit(function (event) { // Why does this not? On the developers console this does selects the form, but doesn't stops it from submitting...
        // console.log(this);
        let formData = $(this).serialize();
        let formAction = $(this).attr("action");
        $.ajaxSetup({
            headers: {"X-CSRF-Token": $("#_csrf").val()}
        });
        $.ajax({
            context: this, /* setting context for ajax callbacks*/
            url: formAction,
            data: formData,
            type: "PUT",
            dataType: "json"
            })
            .done(function(data) {
            if (data) {
                console.log("Success! = " + JSON.stringify(data));
            }
            }).fail(function(data) {
            console.log("Something went wrong: " + data.responseText);
        });
    });
}

var editReviews = document.getElementsByClassName('btn-edit-submit');
for (var i = 0; i < editReviews.length; i++) {
    editReviews[i].addEventListener('click', function(event) { // editReviews works in the dev console and every button is selected
        event.preventDefault();
        // alert("clicked"); // This alert is working,
        // PUT Request form
        var form = this.closest("form");
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            submitEditForm(form);
        });
    });
}

它阻止它提交，但 AJAX 请求也不会通过，我做错了吗？

另外，如果我在没有实际使用 .closest() 的情况下提交表单，它确实通过 POST 路由提交，但问题是它提交了第一个 form.edit-form，因为我对它进行了硬编码。

Answer 1

您不应该在 submitEditForm 中调用 form.submit()，您应该只执行 AJAX 代码。

此外，提交按钮的点击监听器应该只调用 submitEditForm()，而不是为表单添加提交处理程序(在另一个监听器中添加事件监听器几乎总是错误的 - 每个单击时，您将添加另一个监听器，并且只有在第一次单击后提交后，提交处理程序才会起作用)。

var submitEditForm = function(form) {

  // console.log(this);
  let formData = $(form).serialize();
  let formAction = $(form).attr("action");
  $.ajaxSetup({
    headers: {
      "X-CSRF-Token": $("#_csrf").val()
    }
  });
  $.ajax({
      context: form,
      /* setting context for ajax callbacks*/
      url: formAction,
      data: formData,
      type: "PUT",
      dataType: "json"
    })
    .done(function(data) {
      if (data) {
        console.log("Success! = " + JSON.stringify(data));
      }
    }).fail(function(data) {
      console.log("Something went wrong: " + data.responseText);
    });
};

$(".edit-form").submit(function(event) {
  event.preventDefault();
  submitEditForm(this);
});

var editReviews = document.getElementsByClassName('btn-edit-submit');
for (var i = 0; i < editReviews.length; i++) {
  editReviews[i].addEventListener('click', function(event) { // editReviews works in the dev console and every button is selected
    event.preventDefault();
    // alert("clicked"); // This alert is working,
    // PUT Request form
    var form = this.closest("form");
    submitEditForm(form);
  });
}