Problema con l'ajax

Salve, premetto che non conosco l'ajax, ma ho bisogno di un aiutino.
Questo è un codice che ho trovato in un sito per il rank con le stelline.

Questo è il codice CSS:

<style type="text/css">
#STAR_RATING ul
{
  margin: 0px;
  padding: 0px;
  height: 16px;
  list-style: none;
}
#STAR_RATING li
{
  width: 19px;
  height: 16px;
  display: block;
  float: left;
  background-image: url('star-off.gif');
  background-repeat: no-repeat;
  cursor: pointer;
}
#STAR_RATING li.on
{
  background-image: url('star-on.gif');
}
#STAR_RATING span.output
{
  padding: 3px;
  color: #339900;
  font-weight: bold;
}
</style>

E questo il codice JS:

<script type="text/javascript">
// faccio il preload dell'immagine utilizzata per l'effetto rollover
var staron = new Image(); staron.src = "star-on.gif";

// Definisco la funzione per la votazione che verrà lanciata
// all'evento onclick su una delle 5 stelle
function star_vota(QT)
{
  // Creo una variabile con l'output da restituire al momento del voto
  var star_output = '<span class="output">Hai votato ' + QT + ' stelle!</span>';
  // Cambio dinamicamente il contenuto del DIV contenitore con il messaggio di
  // conferma di votazione avvenuta
  document.getElementById('STAR_RATING').innerHTML = star_output;
}

// Definisco la funzione per "accendere" dinamicamente le stelle
// unico argomento è il numero di stelle da accendere
function star_accendi(QT)
{
  // verifico che esistano i DIV delle stelle
  // se il DIV non esiste significa che si è già votato
  if (document.getElementById('star_1'))
  {
    // Ciclo tutte e 5 i DIV contenenti le stelle
    for (i=1; i<=5; i++)
    {
      // se il div è minore o uguale del numero di stelle da accendere
      // imposto dinamicamente la classe su "on"
      if (i<=QT) document.getElementById('star_' + i).className = 'on';
      // in caso contrario spengo la stella...
      else document.getElementById('star_' + i).className = '';
    }
  }
}

// Questa è la funzione che produce l'output.
// richiede come unico argomento il numero di stelle che si vuole accendere
// di default (possiamo in questo, ad esempio, modo mostrare il voto ottenuto
// nelle precedenti votazioni)
function star(QT)
{
  // stampo il codice HTML che produce le stelle
  document.write('<div id="STAR_RATING" onmouseout="star_accendi(' + QT + ')""><ul>');
  document.write('<li id="star_1" onclick="star_vota(1)" onmouseover="star_accendi(0); star_accendi(1)"></li>');
  document.write('<li id="star_2" onclick="star_vota(2)" onmouseover="star_accendi(0); star_accendi(2)"></li>');
  document.write('<li id="star_3" onclick="star_vota(3)" onmouseover="star_accendi(0); star_accendi(3)"></li>');
  document.write('<li id="star_4" onclick="star_vota(4)" onmouseover="star_accendi(0); star_accendi(4)"></li>');
  document.write('<li id="star_5" onclick="star_vota(5)" onmouseover="star_accendi(0); star_accendi(5)"></li>');
  document.write('</ul></div>');
  // accendo le stelle definite in argomento
  star_accendi(QT);
}
</script>

E questo il codice per richiamare il tutto:

<script type="text/javascript">star(3);</script>

Io vorrei inserire nel db il voto che è stato votato dall'utente. Come faccio con ajax?

[alemoppo]

Se non conosci ajax, ti consiglio di usarlo tramite jQuery:

già una cosa del genere può risolvere molti problemi:

$.ajax({
   type: "POST",
   url: "pagina_destinazione.php",
   data: "a="+variabvile+"&b=ciao",
   success: function(msg){
	alert("Il server ha risposto: "+msg);
   }
 });

Non credo necessiti di particolari spiegazioni il sorgente sopra...

essendo un framework, dovrai includere lo script jQuery!
Ciao!

E quindi eseguo la query in pagina_destinazione.php?

[alemoppo]

E quindi eseguo la query in pagina_destinazione.php?

Sì.. ovviamente la puoi rinominare come vuoi...Quella è la pagina in cui riceve i dati (in quel caso è POST, ma possono essere benissimo anche GET)...

Prima fai un paio di prove per vedere come funziona...

Ciao!

Allora, io ho fatto questo codice JS:

<script language="javascript">
// faccio il preload dell'immagine utilizzata per l'effetto rollover
var staron = new Image(); staron.src = "style/star-on.gif";

// Definisco la funzione per la votazione che verrà lanciata
// all'evento onclick su una delle 5 stelle
function star_vota(QT)
{
// Creo una variabile con l'output da restituire al momento del voto
var star_output = '<span class="output">Hai votato ' + QT + ' stelle!</span>';
// Cambio dinamicamente il contenuto del DIV contenitore con il messaggio di
// conferma di votazione avvenuta

document.getElementById('STAR_RATING').innerHTML = star_output;

$.ajax({
   type: "POST",
   url: "include/voto.php",
   data: "a="+QT+"&b=ciao",
   success: function msg (msg){
    alert("Il server ha risposto: "+msg);
   }
 });
}

// Definisco la funzione per "accendere" dinamicamente le stelle
// unico argomento è il numero di stelle da accendere
function star_accendi(QT)
{
// verifico che esistano i DIV delle stelle
// se il DIV non esiste significa che si è già votato
if (document.getElementById('star_1'))
{
// Ciclo tutte e 5 i DIV contenenti le stelle
for (i=1; i<=5; i++)
{
// se il div è minore o uguale del numero di stelle da accendere
// imposto dinamicamente la classe su "on"
if (i<=QT) document.getElementById('star_' + i).className = 'on';
// in caso contrario spengo la stella...
else document.getElementById('star_' + i).className = '';
}
}
}

// Questa è la funzione che produce l'output.
// richiede come unico argomento il numero di stelle che si vuole accendere
// di default (possiamo in questo, ad esempio, modo mostrare il voto ottenuto
// nelle precedenti votazioni)
function star(QT)
{
// stampo il codice HTML che produce le stelle
document.write('<div id="STAR_RATING" onmouseout="star_accendi(' + QT + ')""><ul>');
document.write('<li id="star_1" onclick="star_vota(1)" onmouseover="star_accendi(0); star_accendi(1)"></li>');
document.write('<li id="star_2" onclick="star_vota(2)" onmouseover="star_accendi(0); star_accendi(2)"></li>');
document.write('<li id="star_3" onclick="star_vota(3)" onmouseover="star_accendi(0); star_accendi(3)"></li>');
document.write('<li id="star_4" onclick="star_vota(4)" onmouseover="star_accendi(0); star_accendi(4)"></li>');
document.write('<li id="star_5" onclick="star_vota(5)" onmouseover="star_accendi(0); star_accendi(5)"></li>');
document.write('</ul></div>');
// accendo le stelle definite in argomento
star_accendi(QT);
}
</script>

e il file voto.php è questo:

<?php include ("config.php");

$voto = $_POST['a'];
$query = mysql_query("INSERT INTO utenti (voto) VALUES ('$voto')");

?>

Però quando guardo nel db non me lo inserisce. Cosa sbaglio?

[alemoppo]

ma noo!..

Questa riga

data: "a="+QT+"&b=ciao",

sono i parametri.. ovviamente io li ho impostati a caso... te devi impostarli cme ti servono a te!....

quindi data: "a="+QT è già sufficiente.. quindi nel php prelevi il dato tramite $_POST['a'];..

$query = mysql_query("INSERT INTO utenti (name) VALUES ('nome')"); 

Ma scusa.. mi pare di capire che devi inserire il numero di stelline, no? cosa centra il nome :\ ?

ciao!

No, niente... Infatti avevo corretto con

$voto = $_POST['a'];
$query = mysql_query("INSERT INTO utenti (voto) VALUES ('$voto')"); 

ma non accade nulla, non inserisce i dati!

[alemoppo]

No, niente... Infatti avevo corretto con



ma non accade nulla, non inserisce i dati!

ma $voto vale $_POST['a'] ?

cioè... dovresti fare tipo:

$query = mysql_query("INSERT INTO utenti (voto) VALUES ('$_POST['a']')"); 

...però attento alle mysql_injection!

Ciao!

Esatto, è quello che ho fatto, ma niente. Non me li inserisce nel db!

[alemoppo]

allora scrivi ad esempio:

$stream = fopen('debug.txt','w+');
if(isset($_POST['a']))
fwrite($stream,$_POST['a']);
else
fwrite($stream,'$_POST[\'a\'] non esiste!');
fclose($stream); 

Per vedere se e cosa ricevi da ajax...

Ciao!

[javascripter]

Ma hai incluso jQuery nel sito? Se non l'hai fatto dubito che il script funzionerà...

Puoi scaricarlo dal sito ufficiale: http://jquery.com/ e poi caricarlo sul tuo sito per poi includerlo oppure usi quello che hosta google:

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