觸發 AJAX 表單提交時站點重新加載

Question

我想用 ajax 更新我的 mySQL 數據庫。 當我點擊提交按鈕時，瀏覽器不應重新加載或轉到不同的 URL。

我的表格是這樣的：

<form class="directmsg_form" method="post" id="directmsg_form" name="directmsg_form">
    <div class="form-group" id="directmsg_subject"></div>
    <input class="form-control" style="display: none" id="directmsg_receiverid" name="directmsg_receiverid">
    <div class="form-group">
        <textarea class="form-control" id="directmsg_text" name="directmsg_text" placeholder="Nachricht"></textarea>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-default" name="directmsgsend_button" id="directmsgsend_button" style="font-size: 20px">
            <span class="glyphicon glyphicon-send" style="font-size: 20px"></span>  Nachricht senden
        </button>
    </div>
</form>

這是觸發 AJAX 的 javascript 代碼：

document.getElementById("directmsgsend_button").addEventListener('click',function (){
    var data = $("#directmsg_form").serialize();
    $.ajax({                
        type : 'POST',
        url  : 'directmsg_send.php',
        data : data,
        beforeSend: function(){ 
            $("#directmsg_button").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; übertrage Daten ...');
        },
        success : function(response){                       
            alert(response);
        }
    });
    return false;
}); 

點擊提交按鈕后，我得到了 javascript-alert 就像我應該的那樣 - 然后網站重新加載，我不知道為什么。

Answer 1

將 event.preventDefault() 添加到您的函數中：

document.getElementById("directmsgsend_button").addEventListener('click',function (event)
                {
                event.preventDefault();
                var data = $("#directmsg_form").serialize();

                        $.ajax({                
                        type : 'POST',
                        url  : 'directmsg_send.php',
                        data : data,
                        beforeSend: function(){ 
                            $("#directmsg_button").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; übertrage Daten ...');
                        },
                        success : function(response){                       

                            alert(response);

                        }
                    });

                    return false;

                }); 

Answer 2

正如評論中所指出的，您應該在 click 事件中將 add preventDefault() 添加到您的回調函數中。 您的代碼看起來像這樣。

document.getElementById("directmsgsend_button").addEventListener('click',function (event)
                {
                //will prevent default behavior, reloading page in this case
                event.preventDefault();
                var data = $("#directmsg_form").serialize();

                        $.ajax({                
                        type : 'POST',
                        url  : 'directmsg_send.php',
                        data : data,
                        beforeSend: function(){ 
                            $("#directmsg_button").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; übertrage Daten ...');
                        },
                        success : function(response){                       

                            alert(response);

                        }
                    });

                    return false;

                });