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警报-然后重新加载了网站，我不知道为什么。

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（）。您的代码看起来像这样。

request.pause()

触发AJAX表单提交时网站会重新加载

2 个答案: