页面加载时AJAX正常运行，点击按钮时失效问题排查

核心原因 #

按钮嵌套在<form>标签内，点击时浏览器会默认触发表单提交行为，页面会立刻跳转到form的action指定地址（这里是testsi2.php），导致正在执行的AJAX请求被强制中断，最终触发error回调。而页面加载时的AJAX不受表单提交干扰，所以能正常完成。

解决方法 #

只需阻止按钮的默认表单提交行为，两种常用方式任选其一：

方式1：在点击事件中阻止默认行为 #

在回调函数开头添加event.preventDefault()，直接取消浏览器的默认提交动作：

$("#submitOV").click(function(event) {
    // 阻止表单默认提交，避免页面跳转中断AJAX
    event.preventDefault();
    
    console.log("button clicked");
    var selectedVak = 7;
    var selectedKlas = 2;
    var selectedJaar = 2023;
    console.log("prepping ajax call");
    var url = "ajax.php?vak=" + selectedVak + "&klas=" + selectedKlas + "&jaar=" + selectedJaar + "&task=4";
    console.log("calling " + url);
    $.ajax(url, { 
        success: function(data) { 
            console.log("AJAX call was successful.");
            console.log("Data from the server = " + data);
        },
        error: function() { console.log("There was some error performing the AJAX call."); } 
    });
});

方式2：修改按钮类型为button #

form内的按钮默认类型是submit，会触发表单提交。显式设置按钮类型为button，就不会触发默认提交：

<form method="POST" action="testsi2.php">
    <p><button id="submitOV" type="button">submit this</button></p>
</form>

验证效果 #

修改后点击按钮，只会执行AJAX请求，不会触发页面跳转，AJAX就能正常获取服务器返回的数据。

内容的提问来源于stack exchange，提问作者Patrick