Using Ajax and PHP to insert and update page without reloading

Question

I am new to Ajax and have just started using PHP and I have made this working using PHP but it reloads the page, as one expects.

When I press a button it inserts a query according to which button is clicked. The php code is in the same file and no Ajax code is implemented as I couldn't figure out how.

These are the buttons which are in a form with no action and method POST,

<button type="submit" name="btnName" id="btnName" class="btn btn-success hidden-xs hidden-sm"></span>Name</button>

I have five of these, with different ids.

and this is the PHP code being used,

if(isset($_POST['btnName'])){
    $sqlName = sprintf("INSERT INTO `PersonSong`(`Person_Id`, `Song_Id`) VALUES (1,%s)",mysql_real_escape_string($addressId));
    $sqlNameQ = mysql_query($sqlName);
    if($sqlNameQ){
        echo "Added";
    }else {
        echo "You already know this!";
    }
}

There are five of these also.

When this query is 'added' an icon at the bottom of the page is displayed if the person knows the song,

    <?php 
    $sqlPersonSong = mysql_query("SELECT Person.Name AS PersonName, PersonSong.Person_Id AS PersonID, PersonSong.Song_Id AS SongID, Person.Facebook_Id AS FacebookID FROM PersonSong INNER JOIN Person ON PersonSong.Person_Id=Person.Person_Id WHERE PersonSong.Song_Id ='".$rows['SongId']."'"); ?>
    <div class="hidden-xs hidden-sm">
        <?php 
        $numRows = 1;
        while($rowFacebookImg = mysql_fetch_array($sqlPersonSong)) { ?>
        <a href="#">
            <img class="circleImage img-circle" alt="Brand" src="http://graph.facebook.com/<?php print $rowFacebookImg['FacebookID'] ?>/picture?type=square&width=200&height=200" 
            data-toggle='tooltip' data-placement='top' title='<?php print $rowFacebookImg['PersonName'] ?>'>
        </a>
        <?php } ?>
    </div>
</td>

How can update the image at the bottom without reloading the page? Thank you.

Tip: DO NOT USE mysql_* functions. They are deprecated. Instead use PDO or MySQLi — Saiyan Prince, Jan 21 '16 at 18:01

score 0 · Answer 1 · answered Jan 21 '16 at 18:11

Yes it's easy with jQuery

$.get("myUrl/to/getImages?parameter=value", function(returnData)
{
    var myImageUrl = returnData.myImageUrl;
    //Set to an image
    $("#myImgID").attr("src", myImageUrl);
});

Your url should echo (only) something like this :

header('Content-Type: application/json');
echo "{\"myImageUrl\":" . $myImageUrl . "}";

Using Ajax and PHP to insert and update page without reloading

1 Answers1