每秒刷新一个变量

时间:2013-08-18 16:11:48

标签: php javascript html

我想刷新两个名为profittext和sumtext的变量,这些变量将每隔几秒刷新并在以下位置回显。我知道需要AJAX才能做到这一点,但我如何让它真正起作用呢?我发现的唯一方法是刷新整个文件的内容。有没有办法刷新特定的变量?任何答案将不胜感激。非常非常感谢你。

<table>
if($profitandloss<$zero) {
    $profitText = "<div style=\"color: red;\">$profitandloss</div>";
} elseif ($profitandloss>$zero) {
    $profitText = "<div style=\"color: green;\">$profitandloss</div>";
}
// for profit and loss counting

$sum+= $profitandloss;
//

echo "<tr><td>" . $row['trade_id'] .         
        "</td><td>" . $row['selection'] . 
        "</td><td>" . $row['date'] .
        "</td><td>" . $row['type'] .
        "</td><td>" . $row['size'] .
        "</td><td>" . $row['bidprice'] .
        "</td><td>" . $row['offerprice'] .
        "</td><td>" . $row['stoploss'] .
        "</td><td>" . $row['takeprofit'] .
        "</td><td>" . $profitText . 
        "</td><td><a href ='delete.php?id=".
        $row['trade_id']."'>X</a>
    </td></tr>";  

$profitandloss=0;

if($sum<$zero) {
    $sumText = "<div style=\"color: red;\">$sum</div>";
} elseif ($sum>$zero) {
    $sumText = "<div style=\"color: green;\">$sum</div>";
}
}
echo "</table><br>";
?>
<!DOCTYPE html>
<html>
<table style="border:1px solid black;">
<tr>
<th style="border:1px solid black;">Profit/Loss</th>
</tr>
<tr>
<td style="border:1px solid black;"><?php echo $sumText ;?></td>
</tr>
</table>
</html>

3 个答案:

答案 0 :(得分:2)

当我第一次开始时,我一直在努力解决如何构建这样的代码的问题。虽然它不是特定于您的特定变量,但这里有一个快速示例,介绍如何使用jQuery / PHP通过AJAX更新var。

Prologue :如果您经常这样做,您将需要学习 jQuery ,而不是单独使用普通的javascript。如何学习jQuery有很多很棒的免费资源。或者,如果您对在线免费教程不满意,this是一本很好的书。我将在jQuery中编写示例。

设计:好的,它的工作方式是:

  • 在javascript中设置一个计时器,每隔X秒执行一次特定的功能(你不想每秒都这样做)。

  • 该函数对服务器上的.PHP文件进行AJAX调用(使用jQuery),向其发送必要的数据,以便.PHP代码知道要发回的内容。

  • .PHP代码获取所需的数据(例如,使用MySQL)以JSON格式对其进行编码,然后退出。

  • 触发AJAX调用的承诺,并收到从PHP发送的数据。按照您的意愿处理。

  • 从第2步开始重复。

如果您对代码的作用有任何疑问,请询问。

<强> AJAX.PHP

<?php

$mysqli = new mysqli("localhost", "my_user", "my_password", "world");

$return_obj = array();
$request_obj = NULL;

// our AJAX call used "POST" as it's 'type', so we look in that
// variable.
if ( array_key_exists("func",$_POST) ) {

    if ( $_POST['func'] === "get_update" ) {

        if ( array_key_exists("which_var",$_POST) ) {

            $which_var = $_POST['which_var'];
            $which_var = $mysqli->real_escape_string($which_var); // should use prepared statements

            // we sent 'num_people_logged_in' as our value here, so we'll be looking for a column/field
            // with that value. this assumes that some other code, somewhere else,
            // is regularly updating the table. it also assumes that there will only
            // be a single row returned, which will hold the value.
            $query = "SELECT '$which_var' FROM site_stats ";
            if ( $result = $mysqli->query($query) ) {

                if ( $row = $result->fetch_assoc() ) {
                    $request_obj[$which_var] = $row[$which_var];
                }
            }
        }
    }
}

$return_obj['request'] = $request_obj;
echo json_encode($return_obj);
die();

?>

<强> MYCODE.JS

// this actually sends the AJAX request to the server.
function getUpdate() {

    var jqXHR = $.ajax({        
        url : "ajax.php",
        data : {
            'func' : 'get_update',
            'which_var' : 'num_people_logged_in'
        },
        dataType : 'json',
        type : 'POST',
        timeout : 10000
    });

    // attach 'promises' to the jqXHR object, which represents
    // the AJAX call itself. 'promises' are, in this context,
    // just events.

    jqXHR.done(function(data,textStatus,jqXHR) {        

        // this executes if the AJAX call succeeded.
        // the variable 'data' holds what the server
        // sent us.
        if ( ( data ) && ( data.request ) ) {
            receiveUpdate(data.request);
        }
    });

    jqXHR.fail(function(jqXHR,textStatus,errorThrown) {

        // this executes if it failed
        console.log("Fail: " + textStatus + " (" + errorThrown + ")");
    });

    jqXHR.always(function(a,textStatus,c){                    

        // this executes either way, after .done or .fail
    });
}

// this is called from jqXHR.done, on success
function receiveUpdate(request_obj) {
    if ( request_obj.num_people_logged_in ) {
        updateDOM(request_obj.num_people_logged_in);
    }
}

function updateDOM(num_people_logged_in) {
    if ( num_people_logged_in ) {
        $("#mydiv > p.update").html("The updated value is: " + num_people_logged_in);
    }
}

var timeoutID = null;

// setup our timer, to periodically make an
// AJAX call
function init() {
    timeOutID = setInterval(function(){
        getUpdate();
    },5000);
}

// stop the timer
function cleanup() {
    clearTimeout(timeoutID);
}

<强> INDEX.HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>AJAX practice</title>

    <!-- <link href="mycss.css" rel='stylesheet'> if needed -->

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="mycode.js"></script>
    <script>

        $(document).ready(function() {

            init();

            $("#cleanup").on("click",function(){
                cleanup();
            });

        }); // end ready

    </script>
</head>

<body>

    <div id='mydiv'>
        <p>
            How many people are online?
        </p>
        <p class='update'>
        </p>
    </div>

    <button id='cleanup'>Stop updating!</button>

</div>
</body>
</html>

答案 1 :(得分:0)

使用计时器:https://developer.mozilla.org/en/docs/DOM/window.setInterval

setInterval(function(){
  //update your var here
},1000);

答案 2 :(得分:0)

您需要两个PHP页面: - 一个使用HTML和JS,它定期进行ajax调用并将结果放入HTML - 第二个用动态数据块的json(甚至纯文本)输出

不幸的是,在答案中编写完整的代码并不是人们在stackoverflow上做的,所以请看下面的小例子,并尝试找出缺少的部分。

http://jsfiddle.net/AMEqz/

var xhr = new XMLHttpRequest();
xhr.onload = function(r) {
   // your render logic HERE
   setTimeout(send, 1000);
}
function send() {
    xhr.open("GET", "/", true);
    xhr.send();
}
send();

p.s。:请记住,每个ajax请求都意味着与服务器的额外连接,因此请确保它可以处理负载;)