javascript - Ajax 在提交表单时发送我的表单

Question

我正在开发一个小项目，其中有一个 ajax 调用，该调用应该提交我的表单而不刷新页面(或将我重定向到另一个页面)，但是我偶然发现的问题是:ajax 函数在以下情况下不响应我点击提交。

ajax 代码看起来有点奇怪(例如 })；在 eBlock 调用中，但那是因为它也包含该部分中的代码...但我认为不是对本文有用的代码。

我的ajax代码:

function saveExercise() {
$('.eBlock').each(function (i, contents) {
    //lots of code here
});

$.ajax({
    url: 'saveJson.php',
    type: 'POST',
    data: eBlock,
    dataType: 'json',
}).done(function (response) {

});
}

我的表格:

<form  id='my_form' class="container-fluid" action="" method="POST" required>
   <button id='resetInputs' type='button' onclick='getResetInputs()' class='btn btn-danger fa fa-refresh fa-2x resetInputs'></button>
   <button type='submit' id='saveBtn' class='btn btn-info fa fa-download fa-2x saveBtn' required name="submit" onclick="saveExercise()"></button>
</form>

不确定这是否是您可以使用的任何信息，但 ajax 调用位于 JavaScript 文件中。

编辑:是的，我一直在研究 Preventdefault();我什至寻找同样的问题并发现Form not submitting with AJAX这篇文章与我遇到的同样的问题相关。

进一步的更改是:删除了 window.location 部分。但保留 .done 以备不时之需。

Answer 1

您可以使用 jquery 监听表单元素的提交事件，然后运行 ​​ajax 请求，如下所示:

$("#my_form").submit(function(e){
     $.ajax({
         url: 'saveJson.php',
         type: 'POST',
         data: eBlock,
         dataType: 'json',
     }).done(function (response) {
        window.location = 'index.php';
     });
})