Question

每当按下按钮时，我都试图使用ajax jquery来阻止重新加载页面，但是实现该页面后仍在重新加载页面。

这只是一个“赞”帖子的测试系统。

// foreach循环回显行

foreach($dbData as $post){
  <p id="likecount" class = "likecount"> </p>
     <p>
     <form method="post" id="liketest" class="redirect" >
     <button type="submit" id="like" name="like" value= "'.$post["id"].'">
         <i class="fa fa-heart"></i>
     </button>
     </form>
     </p>
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#like').focus();
            $('#like').keypress(function(event) {
                var key = (event.keyCode ? event.keyCode : event.which);
                if (key == 13) {
                    var info = $('#like').val();
                    $.ajax({
                        method: "POST",
                        url: "index.php",
                        data: {like: info},
                        success: function(status) {
                            $('#likecount').append(status);
                            $('#like').val('');
                        }
                    });
                };
            });
        });
    </script>
<?php
if (isset($_POST['like'])) {
    echo '<h1>'.$_POST['like'];
}
?>

我希望它不会重新加载页面，但实际输出是单击按钮后仍在重新加载页面。

Answer 1

您可以使用：

event.preventDefault()

之后

$('#like').keypress(function(event) {

停止重新加载页面。

Answer 2

请这样更改您的代码。

<form method="post" id="liketest" class="redirect" onSubmit="return false;">

然后，您必须必须使用ajax发送表单数据。这是发送帖子请求而无需重新加载页面的最佳方法。

Answer 3

尝试

event.preventDefault();

在此之后

$('#like').keypress(function(event) {

Answer 4

您无法更改表单的默认行为，因此只需添加onsubmit="return false"：

<form onsubmit="return false"></form>

return false将阻止form提交

如何停止页面重新加载

4 个答案: