Query SQL without refreshing the page using Ajax

Question

Objective: Query SQL without refreshing the page using Ajax.

I have Like/Dislike buttons that function perfectly as a form and submit input, however, the form refreshes the page.

I have no clue how to make an Ajax call that connects my 'liker.php' (below) to operate within my main page via a class/id div click or button.

$.ajax({
  type: "POST",
  url: "liker.php",
  data: ???
  success: ???
  ...............

I've read some tutorials and looked for answers, but I'm still stumped.

liker.php:

//LIKE FIELD
if (isset($_POST['like'.$id])) {
  if (!in_array("$id", $like_explode)) {
    if (!in_array("$id", $dislike_explode)) {
      mysqli_query($db, "UPDATE likes SET pid_like=CONCAT(pid_like,',$id') WHERE user_id='$user_id'");
      mysqli_query($db, "UPDATE comments SET likes=(likes+1) WHERE id='$id'");
    }
    else
    {
      $new_dislike_string = str_replace(",$id", '', $dislike_string);
      mysqli_query($db, "UPDATE likes SET pid_dislike='$new_dislike_string' WHERE user_id='$user_id'");
      mysqli_query($db, "UPDATE likes SET pid_like=CONCAT(pid_like,',$id') WHERE user_id='$user_id'");
      mysqli_query($db, "UPDATE comments SET likes=(likes+1) WHERE id='$id'");
      mysqli_query($db, "UPDATE comments SET dislikes=(dislikes-1) WHERE id='$id'");
    }
  }
}
//DISLIKE FIELD
if (isset($_POST['dislike'.$id])) {
  if (!in_array("$id", $dislike_explode)) {
    if (!in_array("$id", $like_explode)) {
      mysqli_query($db, "UPDATE likes SET pid_dislike=CONCAT(pid_dislike,',$id') WHERE user_id='$user_id'");
      mysqli_query($db, "UPDATE comments SET likes=(dislikes+1) WHERE id='$id'");
    }
    else
    {
      $new_like_string = str_replace(",$id", '', $like_string);
      mysqli_query($db, "UPDATE likes SET pid_like='$new_like_string' WHERE user_id='$user_id'");
      mysqli_query($db, "UPDATE likes SET pid_dislike=CONCAT(pid_dislike,',$id') WHERE user_id='$user_id'");
      mysqli_query($db, "UPDATE comments SET dislikes=(dislikes+1) WHERE id='$id'");
      mysqli_query($db, "UPDATE comments SET likes=(likes-1) WHERE id='$id'");
    }
  }
}
//LIKE-DISLIKE FIELD END

I'm sure you can find many examples through Google, it isn't that hard. The data would be the identifier i.e if it is a like or a dislike. That can be done however you want. Using bool, ints or even a string. The success callback would be where you would simply update the amount of likes/dislikes. — Script47, Jul 27 '15 at 06:08
Since I'm not sure how to use Ajax, I just communicate with the php like this:
:( — Kei, Jul 27 '15 at 06:08
Thanks Script, I'll keep looking. Could you give me an example of how to write the "data" "success" part with my php file? — Kei, Jul 27 '15 at 06:09
I'm sure someone will write an example. I'm on mobile right now so it would be quite difficult. — Script47, Jul 27 '15 at 06:20

vnponce · Answer 1 · 2015-07-28T19:50:25.063

i'll explain you how to use ajax with jquery. I don't understand all how it works $_POST variables, but i'll hope help you.

First use a class to know when a element like/dislike is clicked. Second use a name to know if is a Like or Dislike.

Example for like:

<a href="ID" class="classForLikeOrDislike" name="like">Like</span>

Dislike:

<a href="ID" class="classForLikeOrDislike" name="dislike">Dislike</span>

El ajax

$(".classForLikeOrDislike").click(function(){

    // Get the varible ID, to send to your php
    var id = $(this).attr('href');

    // Get the varible name, to send like or dislike
    var l = $(this).attr('name');


    $.post({url: "liker.php", {id: id}, success: function(result){
        // do some code here
        // here yo can see 'result' response of liker.php
        // console.log(result);
    }});

});

*Update change span tag by anchor tag with href .

UPDATE to response the 'ONLY CLICK' question above

The event variable is something that must be passed to your your anonymous function.

<script>
function chk(event) 
{
    // Prevent trigger submit and reload page
    event.preventDefault();
    var name=document.getElementById('clicker'); 
    $.ajax({
          type:"post",
          url: "clicky.php",
          data: {clicker:1} , <--- here goes the data that you want to send to your php file,  in this case SEND $_POST['clicker'] with value 1
          cache: false,
          success: <-- When is success your request, whats you want to make (other code) maybe print 'OK'
    }); 
}
</script>


<?php 
  if(isset($_POST['clicker'])) 
  { 
      mysqli_query($db,"UPDATE items SET this='that' WHERE number='1'")
  }
?>

I'd say it is more than bad practice. It could cause errors in the script when trying to manipulate DOM. — Script47, Jul 27 '15 at 06:29
Thanks for all the advice, I have one last question. I'm getting the ajax to query my db properly, but my echoed $likes php variable is not updating without a page reload - any ideas? — Kei, Jul 28 '15 at 18:36
Are you actually setting the newly Ajaxed data in the element you want? — Script47, Jul 31 '15 at 04:13

score 0 · Answer 2 · answered Jul 27 '15 at 06:10

0

Try something like this:

$("#likeButtonID").click( function()
{
     $.ajax({  
        type: "POST",  
        url: "liker.php",  
        data: { like: $(this).val(); },
        success: function(result) {
            alert('Ajax Success Ran');
        }
   });
});

Or if you have many like buttons on a page you can do a jquery loop over each of them.

answered Jul 27 '15 at 06:10

TomDillinger

194
7

Thank you! I will try it out – Kei Jul 27 '15 at 06:13

score 0 · Answer 3 · edited May 23 '17 at 11:52

0

WebMethod let act an ajax call like a webservice, no response are processed, class in json/xml format is returing (or nothing, just perform actions on server)

in AspNet is quite easy, try this if helps PHP Equivalent to Authorized ASP.NET WebMethod (AJAX)?

regards

edited May 23 '17 at 11:52

Community

1
1

answered Jul 29 '15 at 06:12

Fabio Guerrazzi

164
1
5

Query SQL without refreshing the page using Ajax

3 Answers3