我想刷新两个名为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>
当我刚开始的时候,我也很难理解如何构建这样的代码。虽然它不是特定于您的特定变量,但这里有一个关于如何使用jQuery/PHP通过AJAX更新var的快速示例。
序言:如果这是你经常做的事情,你会想学习jQuery,而不是单独使用普通的javascript。关于如何学习jQuery,有很多很棒的免费资源。或者,如果你对免费的在线教程不满意,这是一本很棒的书。我将在jQuery中编写这个示例。
设计:好的,所以它的工作方式是:
-
在javascript中设置一个计时器,使其每X秒执行一个特定函数(您不希望每秒钟执行一次)。
-
该函数对服务器上的.PHP文件进行AJAX调用(使用jQuery),向其发送必要的数据,以便.PHP代码知道要发回什么。
-
PHP代码获取所需的数据(例如,使用MySQL),并将其编码为JSON格式,然后退出。
-
AJAX调用上的promise被触发,并且从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);
}
索引.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>
您将需要两个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();
附言:请记住,每个ajax请求都意味着与服务器的额外连接,因此请确保它能够处理负载;)
使用计时器:https://developer.mozilla.org/en/docs/DOM/window.setInterval
setInterval(function(){
//update your var here
},1000);