Send Like/Dislike to database with ajax

Question

I have a little problem, I need to send an ajax request to a file. Here is my HTML File (index.html)

<a id="like" href="./?act=like&id=24" title="Nobody likes this post!">Like</a> &middot; <a id="dislike" href="./?act=dislike&id=24" title="Nobody dislikes this post!">Dislike</a>

And my like.php file:

<?php
if(!is_logged()) {
    header("Location: ./?act=Home");
die();
}
$uid = $user['id'];
$id = $_GET['id'];
if(isset($id)) {
    $query = mysql_query("INSERT INTO ld (auth_id,post_id,val) 
                          VALUES ('".$uid."','".$id."','1')");
    if($query) {
    header("Location: ".$_SERVER['HTTP_REFERER']);
    } else {
    echo "Contatta l'amministratore riportando l'errore 101";
    }
} else {
header("Location: ./?act=Home");
}
?>

And my "ld" table:

== Struttura della tabella ld

|------
|Campo     |Tipo      |Null|Predefinito
|------
|//**id**//|int(5)    |No  |
|auth_id   |varchar(5)|No  |
|post_id   |varchar(5)|No  |
|val       |varchar(1)|No  |
== Dump dei dati per la tabella ld

|5|4|1|1
|6|4|1|1
|7|4|1|1
|8|4|1|1
|9|4|1|1
|10|4|1|1
|12|4|1|1
|13|4|1|1
|14|4|1|2
|20|4|15|1
|23|5|17|1
|29|4|17|1
|30|4|18|1
== Struttura della tabella ld

|------
|Campo     |Tipo      |Null|Predefinito
|------
|//**id**//|int(5)    |No  |
|auth_id   |varchar(5)|No  |
|post_id   |varchar(5)|No  |
|val       |varchar(1)|No  |

I really don't know how to send an ajax request, and I have also tried to learn ajax but no way, I can't understand it.

Have you looked at jQuery's ajax helper method. It makes it much MUCH easier! — Daniel Casserly, Jul 25 '12 at 15:53
http://stackoverflow.com/questions/10553971/ajax-and-js-for-like-button/10554151#10554151 similar question — Anton Sementsov, Jul 25 '12 at 16:01
@Denn I would suggest you [start here](http://docs.jquery.com/Tutorials) .. when you have some code then come back here and ask a proper thought out question ... including the code you have written — Manse, Jul 25 '12 at 16:01
Someone else asked the same question here http://stackoverflow.com/questions/5004233/jquery-ajax-post-example — theDazzler, Jul 25 '12 at 16:05

score 2 · Accepted Answer · answered Jul 25 '12 at 16:02

You should use jquery, it's actually very simple with it. First include this in your HTML file:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Then add this, it is called a "listner" and it pays attention in this case to when your link is clicked:

// A # is used since we are using an id to get the element
// A . is used for a class, but we are using the id at the moment
$('#like').click(function(e) { // We assign a click listner with a handler (a function)
  e.preventDefault(); // run this to stop it from going to a new page automatically
  $.get('./', {'act' : 'like', 'id' : $(this).attr('data')}, function(e) {
    // Handle success here
  }, 'json'); // expecting a json object back by using echo json_encode(array(...)) in PHP
});

With my example you will need to change the html to this:

<a id="like" href="" data="24" title="Nobody likes this post!">Like</a>

And then you could do the same thing with dislike. The {} as the second parameter i did in the $.get is a javascript array as a fyi. Here is the $.get method i used in jquery's documentation: http://api.jquery.com/jQuery.get/

For information on what ajax is and how it works check out this article: http://www.webdesignerdepot.com/2008/11/how-ajax-works/

Feel free to ask for any clarifications

Thank you very much it is what I wanted to do! Just another question: to get in real time the number of likes, do I have to use Ajax again? — Denn, Jul 25 '12 at 16:25
This is part of the handler event (function(e) {}) So assuming there is X likes, now there should be X+1, but there is also the possibility that 10 other people have liked whatever it is since you have, so in the back-end script you should get the number of likes after you update the # for this current person. Then return this number and use the handler to change the number shown. If you want it to continuously update without having to like/dislike then you need to set a timer script to run every X number of minutes to access another script that gets the # of likes for each thing :) Gl! — MasterGberry, Jul 25 '12 at 16:31

score 0 · Answer 2 · answered Jul 25 '12 at 16:01

0

I don't have the rep to add a comment, so I have to put my comments as answers for now. Check out http://www.w3schools.com/ajax/default.asp and http://api.jquery.com/jQuery.ajax/

It would be too long of an answer to explain ajax and jquery.

answered Jul 25 '12 at 16:01

Matt

6,993
4
29
50

Send Like/Dislike to database with ajax

2 Answers2