cerco un tutorial per interscambio php/ajax mysql

[Bukowski]

Ciao a tutti,
è qualche giorno che mi sto imbattendo con Ajax e jQuery per un sito che sto realizzando. Premetto che conosco bene il php, ma poco il javascript.
Ho già scaricato e adattato alcuni script ajax/php trovati qua e la per alcune funzioni, alcuni anche di base complessi.
Ciò che sto trovando invece fatica a trovare in rete è un tutorial su una cosa banalissima: ovvero un interscambio di dati e valori tra un div e una pagina php/mysql esterna.

Vado a spiegare.
Sto realizzando un sistema in cui gli utenti possono mettersi tra i preferiti gli articoli che leggono nel sito. (Ovviamente poi hanno una pagina con tutti i loro pferiti).

Ora, io lo immagino cosi:

1. articolo.php
<div id="preferiti">mettimi tra i preferiti</div>

L'utente clicca

2. send.php
connessione al db, metto nei preferiti, e se è tutto ok stampo
echo "Ok, ce l'hai nei preferiti"

Torna indietro un echo che sostituisce la scritta iniziale "mettimi tra i preferiti"

3. articolo.php
(quindi qui ora avrò)
<div id="preferiti">Ok, ce l'hai nei preferiti.</div>

---- fine --------

Pensavo "chissà quanti articoli troverò in materia" ... "sarà la cosa più facile dell'universo" .... e invece .....
Ho trovato di tutto in giro tranne questo, che pensavo, fosse la base del Dom.

Sapete indicarmi se c'è un tutorial con pezzi di codice per qualcosa di simile?
Magari ha un nome specifico questa funzione ... non lo so.
Sarebbe fantastico!!!

[artorius]

beh, non è che puoi pretendere di trovare il codice che serve a te, che faccia già tutto.

Hai già letto qualcosa su AJAX? Se non l'hai fatto ti conviene iniziare dalla guida su html.it: http://javascript.html.it/guide/leggi/95/guida-ajax/

Hai capito come usare jQuery per le chiamate AJAX? se non l'hai ancora fatto è una buona idea dare uno sguardo al sito jquery.com, specialmente alla parte Tutorials

A questo punto, non dovresti avere problemi a capire come procedere, in caso negativo, cerca di elencare cosa ti serve in ciascuna pagina e se non lo sai fare apri un thread su di un argomento preciso.

[Bukowski]

Ciao artorius,
intanto grazie per l'intervento.

Ho già letto la documentazione di JQuery e qualche articoletto in html.it

Ammetto però che la mia conoscenza rimane superficiale e non ho un grandissimo tempo per imparare javascript (lo so, dovrei )

Per questo cercavo direttamente qualcosa simile a quello che mi interessa ottenere, non volendo approfittare totalmente del tempo di altre persone e farmelo fare qui nel forum.

Diciamo una cosa a metà

Mi basterebbe trovare un esempio di richiesta e risposta da un php per cominciare, sai mica come posso trovarlo? :master:

[artorius]

se hai letto http://api.jquery.com/jQuery.ajax/ allora avrai visto che ci sono degli esempi su come effettuare richieste AJAX e come aggiornare elementi della pagina con la risposta del server.

Io jQuery non lo uso, ma prova a fare semplicemente:

PHP: test.php : tu chiamerai questa pagina nel browser

<p id = "Test">
Static Date: <?php echo date("d/m/Y H:i:s"); ?>
</p>
<input type="button" value = "Update" id = "Btn" />

PHP: test.date.php

<?php
  echo date("d/m/Y H:i:s");
?>

JS: da inserire in test.php dopo aver importato jQuery

$(document).ready(function() {
   // Handler for .ready() called.
   $('#Btn').click(function() {
      $.ajax({
         url: 'test.date.php',
         success: function(data) {
            $('#Test').html("Dinamyc Date: "+data);         
         }
      });
   });
});

Ora all'apertura della pagina hai la data e cliccando sul pulsante effettui una richiesta AJAX sul test.date.php, in caso di successo con la richiesta AJAX viene chiamata la funzione associata al campo success alla quale viene passata la risposta del server.

Se hai domande chiedi pure

[Bukowski]

Ciao artorious,
in effetti il tuo sistema si avvicina molto a quello da cui sono partito io.
Alla fine sono riuscito a trovare degli esempi in rete che mi hanno aiutato a capire ancora di più jQuery, e di questo sono felice.

Ammetto che il risultato però non è ancora soddisfacente perchè credo si potesse scrivere con meno codice, ma i livelli di interazione sono almeno 3 ed è stato complicato gestirli.

Io ho fatto cosi.

Prima di tutto c'è da fare una puntualizzazione.
Immaginiamo di avere il link "Metti nei preferiti" che deve cambiare al click con una risposta dal server "Ok è stato messo nei preferiti". Ora, c'è da considerare che se l'utente va in un articolo dove ce l'ha già nei preferiti io devo mostrare una terza istanza "Ce l'hai nei preferiti"... questo mi ha un pò complicato la vita.

Andiamo al codice.

// SCRIPT AJAX/JQUERY PER AGGIUNGERE/RIMUOVERE PREFERITI

$(function() {
        
var txt = $('.nomearticolo').text();
var act = $('.action').text();
$(".aggiungi").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'idart=' + I;

 $.ajax({
   type: "POST",
   url: "/js/send_preferiti.php",
   data: info +
   "&nomearticolo=" + txt +
   "&action=" + act,
   success: function(response){
    $(".response").show();
    $(".response").html(response);
    }
   // success: function(){}
 
 });
 
    $("#aggiungi"+I).hide();
    $("#remove"+I).show();

return false;

});

});


$(function() {
var txt = $('.nomearticolo).text();
var act = $('.action2').text();
$(".remove").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'idarticolo=' + I;

 $.ajax({
   type: "POST",
   url: "/js/send_preferiti.php",
   data: info +
   "&nomearticolo=" + txt +
   "&action=" + act,
   success: function(response){
    $(".response").html(response);
    }
 });
    $("#remove"+I).hide();
    $(".response").hide();
    $("#aggiungi"+I).show();

return false;

});

}); 

Come vedi ho dovuto fare una funzione per quando aggiungo, e una per quando rimuovo, sia per cambiare la visiblità dei div, che per la risposta da parte del server.

In questo modo in send_preferiti.php dopo tutti i controlli del caso avrò una semplice risposta di testo "Tutto ok, è stato messo nei preferiti".

PAGINA PHP DI VISUALIZZAZIONE SCRIPT

<?php // SCRIPT FAVORITI
if($totalRows_preferiti == ''){ // se non ce l'ha tra i preferiti ?>
<div id="aggiungi<?php echo $row_art['id']; ?>">
[img]http://www.upic.co.nz/skins/upic/images/btn-fav.jpg[/img]
    [url="#"]">Aggiungilo ai preferiti![/url]
    <div class="nomearticolo" style="display:none;"><?php echo $row_art['nome']; ?></div>
    <div class="action" style="display:none;">add_pref</div>
</div>
<div class="response"></div>

<div id="remove<?php echo $row_art['id']; ?>" style="display:none;">
[url="#"]">[X][/url]
<div class="action2" style="display:none;">del_pref</div>
</div>
<? } else { // se ce l'ha nei preferiti altro giro ?>
<div id="aggiungi<?php echo $row_art['id']; ?>" style="display:none;">
[img]http://www.upic.co.nz/skins/upic/images/btn-fav.jpg[/img]
    [url="#"]">Aggiungilo ai preferiti![/url]
    <div class="nomegioco" style="display:none;"><?php echo $row_art['nome']; ?></div>
    <div class="action" style="display:none;">add_pref</div>
</div>
<div id="remove<?php echo $row_art['id']; ?>" style="display:;">Ce l'hai nei preferiti
[url="#"]">[X][/url]
<div class="action2" style="display:none;">del_pref</div>
</div>
<? } //  ?>

In pratica, ho dovuto fare una copia delle due istanze per quando l'utente è loggato e ha l'articolo nei suoi preferiti, altrimenti non riuscivo a gestire il display del div.

Insomma, un pò un casino lo ammetto

[artorius]

Personalmente, non avrei aggiunto tutto quel codice non visibile alla pagina, solo per gestire due pulsanti. Io avrei fatto una questione più gestita da JS:

In PHP avrei generato la pagina senza i dati e fatto caricare gli script corretti:

<div id = "Articoli" class="Loading">
In Caricamento
</div>

Poi al caricamento della pagina, avrei lanciato un richiesta AJAX ad una pagina PHP per ottenere i dati nella giusta quantità in formato JSON (la stessa pagina l'avrei riutilizzata per ottenere i dati filtrati, con più o meno elementi).

Una volta ottenuti i dati in un formato usabile:

[
   {
      "id" : 1,
      "title" : "Articolo 1",
      "description" : "Questa è la descrizione dell'articolo",
      "favourite" : true,
      "score" : 4.5
   }
   {
      "id" : 2,
      "title" : "Articolo 2",
      "description" : "Bla bla bla",
      "favourite" : false,
      "score": 2
   }
.....
]

Quando ottieni una risposta JSON con una richiesta AJAX in jQuery, se gli passi il parametro dataType: 'json' nel costruttore, ottieni come argomento passato alla funzione di CallBack l'oggetto JS corrispondente ai dati passati.

Quindi otterresti l'array di dati da manipolare per creare la lista degli articoli, devi solo creare un format per gli articoli, in HTML fisso che andrai a popolare con i dati che ti servono.

Per esempio:

var obj; //Metti di avere il singolo oggetto articolo qui
var articolo = "<div class = \"Article\">";
articolo += "<div class = \"Title\">";
articolo += obj.title
articolo += "<a href=\"favourite.php?id="+obj.id+"&action="+(obj.favourite ? "add" : "remove")+"\" class = \"FavouriteToogler\">";
articolo += (obj.favourite ? "Aggiungi ai Favoriti" : "Rimuovi dai Favoriti") + "</a>";
articolo += "</div>";
articolo += "<div class=\"Description\">"+obj.description+"</div>";
articolo += "</div>";

$(articolo).appendTo('#Articoli'); 

Esegui questo su ogni articolo ritornato dalla richiesta AJAX e la lista è completata con i dati che ti servono. Infine, crei una funzione da applicare sugli elementi a.FavouriteToogler che blocchi l'evento onclick ed invii la richiesta ajax all'HREF dell'elemento chiamante. A seconda della risposta poi cambi il contenuto ed l'HREF del link in modo che sia sempre attivo e non necessiti di hide, show e cambiamenti eccessivi.

[Bukowski]

Oddio, ho appena finito di capirci qualcosa di Ajax e JQuery e già mi proponi il JSON?

L'idea di delegare tutto al js non l'avevo maturata.
Ora faccio delle prove, ma senza JSON, spero di riuscirci lo stesso

Grazie!