PHP、AJAX、HTML：可以在不刷新页面的情况下更新数据库的点赞按钮

Question

I've got a like button, which holds an ID from a database. I'm trying click the like button, update a database and then it'll switch to unlike without reloading the page.

I'll paste the code below, so you have an understanding:

**index.php: **

<script type="text/javascript">

// Like Button Function
    $(document).ready(function(){ 
        $(".likeBtn").on("click", function(){
        
        var threadID = $(this).attr("id");
        console.log(threadID);

        $.ajax({
             type: "POST",
             url: "like_function.php",
             data: threadID,
             success:function(html)
             {
             }
        });

        });
    });

</script>
<form action='javascript:void(0);' method='POST' enctype='multipart/form-data'>
   <input type='submit' name='likeBtn' class='likeBtn' id='52' value='Like'>
</form>

So the var threadID = retrieving an ID from database (I used 52 as example) From here, I want to be able to run a php script (like_function.php) to update database using the ID stored as a variable.

Lastly, I want that button to change to unlike. Sorry for being a noob at this. I'm new to Ajax

Answer 1

You need to use a preventDefault() to cancel the event submit and now you can update your data. Example below:

$(document).ready(function(){ 
        $(".likeBtn").on("click", function(e){ // set e in arguments
        
        e.preventDefault(); // use this
        var threadID = $(this).attr("id"); // [...]