prelevare dati dal database utilizzando ajax

**michimichi** · 04-06-2015, 15:23

salve a tutti, ho ricevuto un esercizio da fare ma mi sono piantato e non ne esco più fuori...vi spiego il mio problema:
innanzitutto ho creato una pagina html dove inserire un gauge (un tachimetro) con linguaggio javascript, e una pagina php che si collega al database da me creato con 2 colonne (id e valori). Fatto questo devo prelevare i dati dal database e darli al tachimetro facendogli spostare la lancetta in modo automatico, (per esempio la tabella id è composta da 11 campi i quali hanno come valori 20-40-60 e così via) solo che ovviamente il tutto deve avvenire in modo dinamico, senza quindi refreshare la pagina...perciò facendo qualche ricerca su google ho capito che devo sfruttare i comandi ajax ma non riesco a far spostare questa benedetta lancetta...ora vi faccio vedere il codice sperando che qualcuno di voi mi possa dare una mano.
questa è la pagina html col gauge:

codice:

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
    <script src="gauge.min.js"></script>
    <style>body{padding:0;margin:0;background:#220}</style>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
    
    
    $(document).ready(function(){
    function showRoom(){
        $.ajax({
            type:"POST",
            url:"prova3.php",
            
            success:function(data){
            
                $("#content").html(data);
                
            }
        });
    }
    showRoom();
    
});
</script>
</head>
<body>


    <p><input type="button" onclick="showGauge()" value="Show Gauge"></p>
    <canvas id="gauge"></canvas>
    <div id="console"></div>
<script>


        
function showGauge() {
    var kpiValue = 0;


    var gauge = new Gauge({
        renderTo    : 'gauge',
        width       : 400,
        height      : 400,
        glow        : true,
        units       : 'Km/h',
        title       : false,
        minValue    : 0,
        maxValue    : 220,
        majorTicks  : ['0','20','40','60','80','100','120','140','160','180','200','220'],
        minorTicks  : 2,
        strokeTicks : false,
        highlights  : [
            { from : 0,   to : 50, color : 'rgba(0,   255, 0, .15)' },
            { from : 50, to : 100, color : 'rgba(255, 255, 0, .15)' },
            { from : 100, to : 150, color : 'rgba(255, 30,  0, .25)' },
            { from : 150, to : 200, color : 'rgba(255, 0,  225, .25)' },
            { from : 200, to : 220, color : 'rgba(0, 0,  255, .25)' }
        ],
        colors      : {
            plate      : '#222',
            majorTicks : '#f5f5f5',
            minorTicks : '#ddd',
            title      : '#fff',
            units      : '#ccc',
            numbers    : '#eee',
            needle     : { start : 'rgba(240, 128, 128, 1)', end : 'rgba(255, 160, 122, .9)' }
        }
    });
    
       
    gauge.onready = function() {
        setInterval( function() {
            gauge.setValue(kpiValue);
            
            if (kpiValue > 220){
                kpiValue = 0;
            }
        
        }, 1000);
    };




    gauge.draw();
    
    
};
</script>


</body>
</html>

mentre questa è la pagina php col database (ho già controllato e funziona)

codice:

<?php

$myconn = mysql_connect('localhost', 'root', 'wkgrp') or die('Errore...');


mysql_select_db('test', $myconn) or die('Errore1');


$query = "SELECT id, valore FROM gauge_data";


$result = mysql_query($query, $myconn) or die('Errore2');


$numrows = mysql_num_rows($result);
 
 for ($x = 0; $x < $numrows; $x++)
 
{ 
    
    $resrow = mysql_fetch_row($result);
    $kpiValue = $resrow[1];
    echo "valore: <b>" . $kpiValue . "</b>";
}


    ?>

**nat99** · 04-06-2015, 17:32

La pagina di risposta contiene qualche errore? Chiamala nel browser prima di utilizzarla in ajax e controlla che il risultato sia corretto.

Nat

Discussione: prelevare dati dal database utilizzando ajax

Strumenti discussione

Ricerca discussione

Visualizza

prelevare dati dal database utilizzando ajax

Permessi di invio