AJAX response includes html from page instead of single value-CodePudding

I have a 'like' button that I have implemented with PHP/MySqL, AJAX and Jquery, which increments likes by 1 each time. It all seems to work fine and updates the database with the new value; however, the response that is returned from the AJAX call is returning all of the html in my .php file that comes before the post handler in my index.php. Other than moving the handler all the way to the top of the page, is there a way of fixing this?

Code below:

index.php

<?php
include './includes/header.php';
?>
<?php
include './includes/title_box.php';
?>
<?php
include './includes/categories_box.php';
?>
<?php
include './includes/roadmap_box.php';
?>

<?php 
        if(isset($_POST['liked'])) {
        $postid = $_POST['postid'];
        $query = "SELECT * FROM posts WHERE post_id=$postid";
        $result = mysqli_query($connection, $query);
        $row = mysqli_fetch_array($result);
        $n = $row['post_upvotes'];
        $query = "UPDATE posts SET post_upvotes=$n 1 WHERE post_id=$postid";
        mysqli_query($connection, $query);
        echo $n   1;
        exit();
        }
?>

<button class="upvote-button" value=<?php echo $id ?>><?php echo $upvotes ?></button>

script.js

$(document).ready(function(){
    $(".upvote-button").click(function(){
        var postID = $(this).val();
            $post = $(this);

            $.ajax({
                url: './index.php',
                type: 'post',
                data: {
                    'liked': 1,
                    'postid': postID
                },
                success: function(response){
                    $post.html(response);
                }
            });
    });
});

console.log(response)

element.style {
}
user agent stylesheet
body {
    display: block;
    margin: 8px;
}

script.js:14 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script
    src="https://code.jquery.com/jquery-3.6.0.js"
    integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>
    <title>Product Feedback App</title>
</head>
<body><div class="title-box">
        <h1>Frontend Mentor</h1>
        <p>Feedback Board</p>
</div><div class="categories-box">
    <ul>
        <li><a href="index.php">All</a></li>
                <li><a href="index.php?category=1">UI</a></li>    
                <li><a href="index.php?category=3">UX</a></li>    
                <li><a href="index.php?category=4">Enhancement</a></li>    
                <li><a href="index.php?category=5">Bug</a></li>    
                <li><a href="index.php?category=6">Feature</a></li>    
            </ul>
</div>
<div class="roadmap-box">

    <h2>Roadmap</h2>
    <a href="./roadmap.php">View Roadmap</a>
    <ul>
        <li>Planned - 2</li>
        <li>In-Progress - 3</li>
        <li>Live - 1</li>
    </ul>
</div>
134

CodePudding user response：

Move your if(isset($_POST['liked'])) and all associated code to a separate file and call that file in your Ajax query url.

You will probably need to include the file that connects to your database in the new file as well, but without seeing the contents of your included files it's hard to give specific advice.