Сайт перезагружается при запуске AJAX-form-submit

Question

Я хочу обновить базу данных mySQL с помощью ajax. Браузер НЕ должен перезагружаться или переходить на другой 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>

А вот код JavaScript, который запускает AJAX:

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-уведомление, как и должно - и затем сайт перезагружается, и я не знаю почему.

Answer 1

Как указано в комментариях, вы должны добавить add protectDefault () к вашей функции обратного вызова в событии click. Ваш код будет выглядеть примерно так.

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;

                }); 

Answer 2

Добавьте 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;

                });