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来监听表单元素的submit事件，然后像这样运行ajax请求：

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

Answer 2

这样做： JS代码：

    $('#my_form').submit(function(event){
        event.preventDefault();

        var data = yourFunctionToGetTheData();

        $.ajax({
            url: url,
            type: "POST",
            dataType: 'json’,
            data: data,
            success: function(result){
            }
        });
    });

HTML code：

  <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>
       <input type='submit' class='btn btn-info fa fa-download fa-2x saveBtn' required name="submit"></button>
  </form>

Ajax在提交表单时发送

2 个答案: