Javascript 关于最近、提交和AJAX PUT请求的问题

我无法停止表单提交。以下是用于上下文的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();
        });
    }
});

$（“.edit form”）.submit（函数（事件）{//为什么不这样做？在开发人员控制台上，它会选择表单，但不会阻止表单提交。。。
event.preventDefault（）；
让formData=$（this.serialize（）；
设formAction=$（this.attr（“action”）；
//console.log（formData）；
//log（JSON.stringify（formData））；
$.ajaxSetup({
标题：{“X-CSRF-Token”：$（“#u CSRF”）.val（）}
});
$.ajax({
上下文：这是，/*为ajax回调设置上下文*/
url:formAction，
数据：formData，
键入：“放置”，
数据类型：“json”
})
.完成（功能（数据）{
如果（数据）{
log（“Success！=”+JSON.stringify（data））；
}
}).失败（功能（数据）{
log（“出错：+data.responseText”）；
});
返回false；
});
var editReviews=document.getElementsByClassName（'btn-edit-submit'）；
$（'.collapse'）.on（“show.bs.collapse”，function（））{
//当div被折叠时触发
console.log（“收拢”）；//收拢完成后工作
对于（var i=0；i

另外，如果我从终端提交表单，它不会提交触发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();
    });
}

for（var i=0；i

但它也不起作用

---

我觉得我还需要提到我使用.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);
        });
    });
}

var submitEditForm=函数（表单）{
submit（函数（事件）{//为什么不这样做？在开发者控制台上，它会选择表单，但不会阻止表单提交。。。
//console.log（this）；
让formData=$（this.serialize（）；
设formAction=$（this.attr（“action”）；
$.ajaxSetup({
标题：{“X-CSRF-Token”：$（“#u CSRF”）.val（）}
});
$.ajax({
上下文：这是，/*为ajax回调设置上下文*/
url:formAction，
数据：formData，
键入：“放置”，
数据类型：“json”
})
.完成（功能（数据）{
如果（数据）{
log（“Success！=”+JSON.stringify（data））；
}
}).失败（功能（数据）{
log（“出错：+data.responseText”）；
});
});
}
var editReviews=document.getElementsByClassName（'btn-edit-submit'）；
对于（var i=0；i

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

---

另外，如果我提交表单时没有实际使用.closest（），它确实会通过POST路径提交，但问题是它提交了第一个表单.edit-form，因为我对它进行了硬编码。

你不应该在

submitEditForm

中调用

表单.submit（）

，你应该只执行AJAX代码

此外，提交按钮的单击侦听器应该只调用

submitEditForm（）

，而不是为表单添加提交处理程序（在另一个侦听器中添加事件侦听器几乎总是错误的——每次单击都会添加另一个侦听器，并且提交处理程序在第一次单击后提交之前不会工作）

var submitEditForm=函数（表单）{
//console.log（this）；
让formData=$（form.serialize（）；
设formAction=$（form）.attr（“action”）；
$.ajaxSetup({
标题：{
“X-CSRF-Token”：$（“#u CSRF”）.val（）
}
});
$.ajax({
背景：形式，
/*为ajax回调设置上下文*/
url:formAction，
数据：formData，
键入：“放置”，
数据类型：“json”
})
.完成（功能（数据）{
如果（数据）{
log（“Success！=”+JSON.stringify（data））；
}
}).失败（功能（数据）{
log（“出错：+data.responseText”）；
});
};
$（“.edit form”）.submit（函数（事件）{
event.preventDefault（）；
提交表格（本）；
});
var editReviews=document.getElementsByClassName（'btn-edit-submit'）；
对于（var i=0；ivar 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);
  });
}