waimea-cpy/add-like.php

## add-like.php
<?php

    require_once 'common-functions.php';

    // Values supplied via the POST request
    $id = $_POST['id'];

    // Do the data update
    $sql = 'UPDATE people
            SET likes = likes + 1
            WHERE id=?';

    modifyRecords( $sql, 'i', [$id] );

    // No echo required here since data is simply sent TO the server

?>

## get-likes.php
<?php

    require_once 'common-functions.php';

    // Values supplied via the POST request
    $id = $_POST['id'];

    // Request the data
    $sql = 'SELECT likes
            FROM people
            WHERE id=?';

    $people = getRecords( $sql, 'i', [$id] );
    $person = $people[0];

    // Send back data value(s)
    // In this case it is just a single plain text value
    // But could use json_encode() if data was more complex
    echo $person['likes'];

?>

## index.php
<?php require_once 'common-functions.php'; ?>

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>AJAX Value Update Demo</title>

        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/styles.css">

        <script src="scripts/likes.js"></script>

    </head>

    <body>

        <header>
            <h1>AJAX Value Update Demo</h1>
        </header>

        <main>

            <section id="people">

            <?php

                $sql = 'SELECT id, name, likes
                        FROM people
                        ORDER BY name ASC';

                $people = getRecords( $sql );

                foreach( $people as $person ) {
            ?>
                    <div class="person">

                        <h3><?= $person['name'] ?></h3>

                        <p>Likes:
                            <span id="likes-<?= $person['id'] ?>"class="likes">
                                <?= $person['likes'] ?>
                            </span>
                        </p>

                        <button onclick="addLike( <?= $person['id'] ?> );">+1 Like</button>

                    </div>
            <?php
                }
            ?>

            </section>

        </main>

    </body>

</html>

## likes.js
async function addLike( id ) {

    console.log( `Sending new like for ID=${id}...` );
    await sendLike( id );

    console.log( `Requesting like count for ID=${id}...` );
    await getAndUpdateLikes( id );
}


/**
 * Example of an AJAX request that only SENDS data to the server
 */
async function sendLike( id ) {

    // Prepare the data to include with the AJAX request
    let dataToSend = new FormData();
    dataToSend.append( 'id', id );  // Can append as much data as required

    // Send the data and wait for a response
    await fetch( 'add-like.php', { method:'POST', body:dataToSend } )
}


/**
 * Example of an AJAX request that REQUESTS data from the server
 */
 async function getAndUpdateLikes( id ) {

    // Prepare the data to include with the AJAX request
    let dataToSend = new FormData();
    dataToSend.append( 'id', id );  // Can append as much data as required

    // Send the data and wait for a response
    const response = await fetch( 'get-likes.php', { method:'POST', body:dataToSend } )

    // Wait for data to be returned - this will be plain text
    // Could use respoonse.json() if returning JSON-encoded data
    const newLikeCount = await response.text();

    // Update the on-screen element
    document.getElementById( 'likes-' + id ).innerHTML = newLikeCount;
}
	<?php

	require_once 'common-functions.php';

	// Values supplied via the POST request
	$id = $_POST['id'];

	// Do the data update
	$sql = 'UPDATE people
	SET likes = likes + 1
	WHERE id=?';

	modifyRecords( $sql, 'i', [$id] );

	// No echo required here since data is simply sent TO the server

	?>
	<?php require_once 'common-functions.php'; ?>

	<!doctype html>

	<html>

	<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>AJAX Value Update Demo</title>

	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/styles.css">

	<script src="scripts/likes.js"></script>

	</head>

	<body>

	<header>
	<h1>AJAX Value Update Demo</h1>
	</header>

	<main>

	<section id="people">

	<?php

	$sql = 'SELECT id, name, likes
	FROM people
	ORDER BY name ASC';

	$people = getRecords( $sql );

	foreach( $people as $person ) {
	?>
	<div class="person">

	<h3><?= $person['name'] ?></h3>

	<p>Likes:
	<span id="likes-<?= $person['id'] ?>"class="likes">
	<?= $person['likes'] ?>
	</span>
	</p>

	<button onclick="addLike( <?= $person['id'] ?> );">+1 Like</button>

	</div>
	<?php
	}
	?>

	</section>

	</main>

	</body>

	</html>
	async function addLike( id ) {

	console.log( `Sending new like for ID=${id}...` );
	await sendLike( id );

	console.log( `Requesting like count for ID=${id}...` );
	await getAndUpdateLikes( id );
	}


	/**
	* Example of an AJAX request that only SENDS data to the server
	*/
	async function sendLike( id ) {

	// Prepare the data to include with the AJAX request
	let dataToSend = new FormData();
	dataToSend.append( 'id', id ); // Can append as much data as required

	// Send the data and wait for a response
	await fetch( 'add-like.php', { method:'POST', body:dataToSend } )
	}


	/**
	* Example of an AJAX request that REQUESTS data from the server
	*/
	async function getAndUpdateLikes( id ) {

	// Prepare the data to include with the AJAX request
	let dataToSend = new FormData();
	dataToSend.append( 'id', id ); // Can append as much data as required

	// Send the data and wait for a response
	const response = await fetch( 'get-likes.php', { method:'POST', body:dataToSend } )

	// Wait for data to be returned - this will be plain text
	// Could use respoonse.json() if returning JSON-encoded data
	const newLikeCount = await response.text();

	// Update the on-screen element
	document.getElementById( 'likes-' + id ).innerHTML = newLikeCount;
	}