AJAX response includes html from page instead of single value

Question

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

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Oct 15 '21 at 14:47

score 1 · Accepted Answer · answered Oct 15 '21 at 14:01

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.

AJAX response includes html from page instead of single value

1 Answers1