Lettura/Scrittura Database con AJAX

[Pich07]

Buon giorno a tutti,
ho appena cominciato ad usare AJAX per un progetto universitario, e sono bloccato in una cavolata. Probabilmente perchè non ho ancora capito bene il funzionamento di AJAX.

Praticamente devo creare una pagina che legge/scrive su un database, senza aggiornare ogni volta la pagina.

Il contenuto è composta da:

ID PRODOTTO
DISPONIBILITA'
QUANTITA

pulsante ORDINA

I primi 3 campi sono recuperati dal database. Ogni volta che schiaccio il pulsante ORDINA, devo aumentare di 10 e aggiornare con il nuovo valore sullo schermo il campo QUANTITA', il tutto senza che la pagina si ricarichi.

Qualcuno riesce a darmi una mano?
Avrei bisogno proprio del codice più o meno esatto. Ho cercato in internet spiegazioni ma (sarò incapace io probabilmente) non mi funzionano.

 

[criric]

Ciao, dovresti postare un po di codice, poi al massimo te lo correggiamo
prendi spunto da questa discussione per non usare Jquery altrimenti su questo forum dovrebbero esserci degli esempi di chiamate ajax anche in Jquery.
Non hai precisato quale linguaggio di programmazione utilizzi

 

[Pich07]

Sto usando Html php e javascript , il tutto hostato su altervista

Questo e' il codice della parte descritta sopra. Il collegamento al database lo ho inserito in un altro file php che viene incluso al caricamento della pagina

<div id="right_col">

<?php
	echo "	<br/> ID PRODOTTO= ".$riga[0]. 
			"<br/> DISPONIBILITA'= ".$riga[1].
			"<br/><div id=\"q.ta\"> QUANTITA= ".$riga[2].
			"</div><br/>IN ORDINAZIONE=".$riga[3];
			
			
			
?>

<input type="button" value="ORDINA" onClick="script2()"/>	


<script>
function script2(id_prodotto) {
    var e = document.getElementById("q.ta");
	<? 

			$conn = dbConnect();
			$id_prodotto= $_GET['id'];
            $query="UPDATE products SET quantita=quantita+10, in_ordinazione=1 WHERE ID=\"".$id_prodotto."\"";
			mysql_query($query);

			?>
    e.innerHTML = <?php echo $riga[2] ?>;
	<?php 			mysql_close($conn);?>
}

</script>

Facendo così mi esegui la query ogni volta che la pagina viene caricata/aggiornata e non quando schiaccio il pulsante ORDINA.

 

[criric]

Non puoi fare tutto in una pagina, ti occorrono 2 pagine
Nella prima lòe funzioni javascript per la chiamata ajax e nella seconda il codice php
Guarda l'esempio che ti ho postato sopra

 

[Pich07]

Allora, ho fatto 2 pagine , entrambe con estenzione ".php", Una contenente il contenuto della pagina e i vari script javascript, l'altra invece contenente la connessione al database e gli eventuali script lato server.
Ho fatto alcune prove banali, come ad esempio riempire i vari campi qui sotto in maiuscolo (id_prodotto, disponibilita, quantita, in_ordinazione) al click del bottone, provando a modificare le varie funzioni che c'erano nell'esempio del link sopra, ma niente, non riesco a capire come far apparire anche una stringa di prova all'interno dei campi.
Come caspita funziona?

<div id="content">
		ID PRODOTTO<div id="id_prodotto"></div></br>
		DISPONIBILIT&Aacute;<div id="disponibilita"></div></br>
		QUANTIT&Aacute;<div id="quantita" name="quantita"></div></br>
		IN ORDINAZIONE<div id="in_ordinazione"></div></br>
		
		<input type="submit" name="submit" class="button" id="submit_btn" value="SEND" onclick="selezione()"/>
	</div>

 

[criric]

Ti mancano le basi dell ' HTML, per questo non credo sia un progetto alla tua portata.
Sicuramente per imparare ci devi provare e riprovare, ma non puoi sbagliare la sintassi del markup
Le due pagine devono avere la seguente struttura
index.html

<script type='text/javascript'>  
    
    var xmlHttp = getXmlHttpObject();
    
    function richiesta_ajax_post(){    
              
        xmlHttp.open('POST', "elabora.php", true);    
        xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4) { 
                if (xmlHttp.status == 200) {     
                    eval(xmlHttp.responseText);
                }
            }
        };    
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");    
        xmlHttp.send();
    }
        
        
    function getXmlHttpObject() {
        
        var xmlHttp=null;
        if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }	
        if (window.ActiveXObject) {
            xmlHttp =  new ActiveXObject("Microsoft.XMLHTTP");
        }
	
        return  xmlHttp;
    }

</script>

<div id="content">
    ID PRODOTTO : <span id="id_prodotto"></span><br/>
    DISPONIBILIT&Aacute; : <span id="disponibilita"></span><br/>
    QUANTIT&Aacute; : <span id="quantita"></span><br/>
    IN ORDINAZIONE : <span id="in_ordinazione"></span><br/>

    <input type="submit" name="submit" class="button" id="submit_btn" value="SEND" onclick="richiesta_ajax_post()"/>
</div>

elabora.php

<?php

$idProdotto = 4029;
echo "document.getElementById('id_prodotto').innerHTML='" . $idProdotto . "';";

$disponibilita = 2;
echo "document.getElementById('disponibilita').innerHTML='" . $disponibilita . "';";

$quantita = 1;
echo "document.getElementById('quantita').innerHTML='" . $quantita . "';";

$in_ordinazione = 0;
echo "document.getElementById('in_ordinazione').innerHTML='" . $in_ordinazione . "';";
?>

entrambi i file vanno nella stessa cartella. altrimenti devi cabiare il percorso nella chiamata ajax
In questo caso la pagina chiamata non crea codice html ma crea codice javascript che verrà eseguito dalla funzione eval()

 

[Pich07]

Ti ringrazio per la pazienza. Su che base dici che mi mancano le basi HTML?

 

[criric]

il ritorno a capo non si scrive cosi </br> ma cosi <br/> e non è corretto inserire del testo tra due elementi di blocco <div>testo<div>
Si hai ragione non sono proprio le basi queste, ma , la sintassi dell'html è davvero essenziale

 

[Pich07]

<br/> è stato un errore di fretta. Per quanto riguarda la parte di codice che ho postato l'ho scritta tanto per vedere come funzionava. Conosco bene la sintassi hmtl. La frustrazione perchè non mi funzionava niente mi ha portato a questo. Haha

 

[criric]

Meglio così.
Hai provato il codice?

 

[Pich07]

Si si ti ringrazio. Ora ho qualche altro problema ma cerco di sbrigarmelo da solo..Grazie milel intanto