如何停止页面重新加载

Question

我正在尝试使用ajax jquery，以便在按下按钮时阻止页面重新加载，但在我实施后，页面仍然重新加载。

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

//循环遍历并输出行

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'];
}
?>

我希望页面点击按钮时不会重新加载，但实际输出是页面仍然重新加载。

- user53267891023

---

顺便提一下，您的代码似乎会生成重复的元素ID。请注意，ID "在整个文档中必须是唯一的"。 - showdev

可能是如何在表单提交后防止页面重新加载的重复问题。还请参见在ajax调用后防止页面刷新和停止表单提交时刷新页面。 - showdev

Answer 1

你可以在以下代码中使用：event.preventDefault()来阻止页面重新加载，代码如下：$('#like').keypress(function(event) { 。

- Suraj Singh

---

页面仍然重新加载:/ - user53267891023

你可以使用类(class)代替id，因为id对于DOM中的所有元素都是唯一的。将行 "<button type="submit" id="like" name="like" value= "'.$post["id"].'"> " 替换为 <button type="submit" class="like" name="like" value= "'.$post["id"].'"> "，并且javascript应该是 "$('.like').keypress(function(event) {"，然后使用event.preventDefault(); 将行 " var info = $('#like').val(); " 替换为 var info = $(this).val(); - Suraj Singh

Answer 2

请将您的代码更改为这样。

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

然后，您必须使用ajax发送表单数据。这是在不刷新页面的情况下发送post请求的最佳方式。

- Fullstack Developer

---

为什么我们坚持使用内联JavaScript？ - Jay Blanchard

Answer 3

尝试这个。

event.preventDefault();

之后

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

- Ahsan Abrar

---

做或不做，没有“尝试”。一个好的答案总是会解释做了什么以及为什么以这种方式完成，不仅为了OP，也为了未来访问SO的用户。 - Jay Blanchard

页面仍然重新加载。 - user53267891023

将按钮类型 submit 更改为 button <button type="button" id="like" name="like" value= "'.$post["id"].'"> <i class="fa fa-heart"></i> </button> - Ahsan Abrar

Answer 4

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

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

return false 会阻止 form 提交

- Ritesh Khandekar

---

为什么我们坚持使用内联JavaScript？ - Jay Blanchard

如果 jQuery.js 没有被加载，只有表单被加载，那么内联 JavaScript 将阻止表单提交。@Jay Blanchard - Ritesh Khandekar

即使您使用VanillaJS，也不需要使用内联JavaScript。 - Jay Blanchard

但是 VanillaJS 和 JS 之间没有区别，我说得对吗？ - Ritesh Khandekar

为了可维护性，不应该使用内联JavaScript。您应该将代码与标记分开。使用处理程序来捕获单击，然后使用preventDefault()。 - Jay Blanchard