如何停止页面重新加载

Question

This question already has an answer here:

                </div>
            </div>
                    <div class="grid--cell mb0 mt4">
                        <a href="/questions/45634088/how-to-prevent-page-from-reloading-after-form-submit-jquery" dir="ltr">How to prevent page from reloading after form submit - JQuery</a>
                            <span class="question-originals-answer-count">
                                (1 answer)
                            </span>
                    </div>
            <div class="grid--cell mb0 mt8">Closed <span title="2019-08-13 16:58:29Z" class="relativetime">9 months ago</span>.</div>
        </div>
    </aside>

I'm trying to use ajax jquery to stop my page from reloading whenever the button is pressed, but the page is still reloading after I implemented it.

This is just a test system for "liking" a post.

//foreach loop that echos out row

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

I expect it to not reload the page but the actual output is the page still reloading once the button is clicked.

</div>

Answer 1

You can use:

event.preventDefault()

after

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

to stop reloading the page.