2014-12-06 31 views
0

我想用jQuery,php和mysql製作慈善計數器。 我試圖從MySQL使用PHP每5秒獲取新的值,而不更新頁面使用'window.setInterval()',但我的問題是,它沒有抓取新的值,但它始終使用它在開始得到的值。所以這裏的代碼,我希望有些人能夠幫助:)。試圖使用mysql和php更新jquery變量

window.setInterval(function(){ 
    var needed = <?php echo neededGetFirst(); ?>; 
    var got = <?php echo gotGetFirst(); ?>; 
    console.log('needed: ' + needed); 
    console.log('got: ' + got); 
    var gaugeHeight = 223; 
    var gaugeBottom = 318; 
    var percent = (100/needed) * got; 
    var heightOffset = (gaugeHeight/100) * percent; 
    var bottomOffset = gaugeBottom - (gaugeHeight - heightOffset); 

    $('#gauge').animate({ 
     height: heightOffset + 'px', 
     bottom: bottomOffset + 'px' 
    }, 1000); 

    for (var i = 2, limit = 7; i < limit; i++) { 
     var value = (needed/5) * (i - 1); 
     $('#stamp' + i).text(value); 
    }; 
}, 5000); 

編輯

是否有可能從一個文件中的一些類型的GET/RUN返回值?通過將php/mysql數據庫函數放在一個文件中,並使用return作爲值。'

EDIT 2

文件中使用PHP代碼:

<?php 
    $pdo = new PDO('mysql:host=127.0.0.1;dbname=thermometer', 'root', ''); 
    $sql = 'SELECT `got`.`value` AS got, `needed`.`value` AS needed FROM `needed`, `got`'; 
    $statement = $pdo->prepare($sql); 
    $statement->execute(); 
    $result = $statement->fetchAll(PDO::FETCH_ASSOC); 
    $json = json_encode($result); 
    echo($json); 
?> 
+4

你想訪問window.setInterval中的服務器端值(得到的票數),你需要使用AJAX來做到這一點。您當前的代碼當然會使用它在開始時獲得的值,因爲您在頁面加載時回顯「獲得」值,沒有任何代碼可以刷新該值。 – Ananth 2014-12-06 16:21:45

回答

1

正如已經提到的,更新每然而,許多秒新值的頁面,你會需要某種可能通過AJAX與服務器進行交互。

這裏是你如何能做到這一點的例子:

function getNewValues(){ 
    return $.ajax({ 
    url: 'submit.php', 
    type: 'POST', 
    dataType: 'json', 
    cache: false 
    }); 
} 

window.setInterval(function(){ 
    getNewValues() 
    .success(function(data) { 
    var needed = data["needed"], 
     got = data["got"]; 

    var gaugeHeight = 223; 
    var gaugeBottom = 318; 
    var percent = (100/needed) * got; 
    var heightOffset = (gaugeHeight/100) * percent; 
    var bottomOffset = gaugeBottom - (gaugeHeight - heightOffset); 

    $('#gauge').animate({ 
     height: heightOffset + 'px', 
     bottom: bottomOffset + 'px' 
    }, 1000); 

    for (var i = 2, limit = 7; i < limit; i++) { 
     var value = (needed/5) * (i - 1); 
     $('#stamp' + i).text(value); 
    }; 
    }) 
    .fail(function() { 
    console.log("An error ocurred"); 
    }); 
}, 500); 

現在,每五秒鐘的請求將觸發到服務器並檢索最新的值。

你將不得不調整自己的PHP腳本返回一些簡單的JSON:

{ 
    "needed": needed_value, 
    "got": got_value 
} 

也許是這樣的:

<?php 
    $pdo = new PDO('mysql:host=host;dbname=db_name', 'user', 'pass'); 
    $sql = 'SELECT needed, got FROM table'; 
    $statement = $pdo->prepare($sql); 
    $statement->execute(); 
    $result = $statement->fetch(); 
    $json = json_encode($result); 
    echo($json); 
?> 

雖然這不是測試,它應該有希望點你的正確的道路。

+0

這是否可以使用左連接?如果是這樣,你能寫一個例子嗎?因爲服務器querry工作,但我必須從2個不同的表中獲取數據 – Thaillie 2014-12-06 17:47:55

+0

無論如何,您必須獲取數據,因爲您正在頁面上輸出它。只需使用你擁有的。 – 2014-12-06 17:52:52

+0

我得到了錯誤:'TypeError:got is undefined',並從文件中回顯:'[{「got」:「1235.00」,「needed」:「4350」}]' – Thaillie 2014-12-06 18:28:42