有关最近，提交和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选择器的原因是视图文件中有多个这样的表单。

编辑：谢谢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

你不应该在form.submit()中调用submitEditForm，你应该只执行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);
  });
}