javascript - How to Update MySQL with PHP and AJAX without REFRESHING the PAGE

Question

Ok here is my question

I have MySQL with the following order:

ids - radio - link - time - artist - title - disliked

---

ids is the ID of the Media

from page LISTEN.php I have random selection of video from the Database.

I have already created in LISTED.php to SHOW THE ID of the Video also the Artist and Title.

**I need to have a button on LISTEN.php where when somebody clicks it for example the name of the button - > Dislike

so if someone clicks it AJAX or SOMEHOW not to refresh the page but in the same time when the DISLIKE button is clicked to Update in the MySQL (once again without refreshing the page) to Disliked - 1, (when this button is pressed again for the same video to update to 2 / 3 / 4 and so on. Right now all of my videos are 0.

I need to be able to View not LIKED videos, for example

select * from RANDOM where DISLIKED is Higher number then >0**

I am not a very good in PHP so please help me, one more time the PAGE SHOULD NOT REFRESH.

Your help would be greatly appreciated.

Answer 1

Ajax in jQuery works like this:

var myData=1;
$.ajax({
    type:'POST',//type of ajax
    url:'mypage.php',//where the request is going
    data:myData,//the variable you want to send
    beforeSend:function(xhr){//as a standard, I add this to validate stuff
        if(someThingWrong===true)xhr.abort//aborts xhttpRequest
   },
   success:function(result){
       //result is your result from the xhttpRequest.
   }
});

This will not refresh your page but send a 'POST' to the url specified. On your specified page you want to do whatever it is you want to do and say return a result. In my example I'll do something simple:

if($_POST['myData']===1)return True;

That's the basics of an AJAX request using jQuery.

EDIT!

initiating an AJAX script: I'm only guess as I don't know your elements within your html nor your scripts what so ever! So you'll have to make adjustments!

$('button.dislike').click(function(){
    $.ajax({
        type:'POST',
        url:'disliked.php',
        data:{dislike:$(this).attr('id')},
        success:function(result){
            $(this).prev('span').append(result);
        }
    });
 });

PHP: don't use mysql, it's now been depreciated and is considered bad practise, I also don't know why're using sprintf on the query? :S

$DBH=new mysqli('location','username','password','database');
$get=$DBH->prepare("SELECT dislike FROM random WHERE ids=?");
$get->bind_param('i',$_POST['dislike']);
$get->execute();
$get->bind_result($count);
$get->close();
$update=$DBH->prepare('UPDATE random SET dislike=? WHERE ids=?');
$update->bind_param('ii',++$count,$_POST['dislike']);//if you get an error here, reverse the operator to $count++.
$update->execute();
$update->close();
return String $count++;

This will only work if there in your HTML there is a series of buttons with ID's matching those in your database. So

$get=$DBH->prepare('SELECT ids FROM random');
$get->execute();
$get->bind_result($ids);
while($get->fetch()){
    echo"<button class='dislike' id='".$ids."'>Dislike this?</button>";
}

Hope you get the general idea of how I'm managing your dislike button system XD lol