是否可以刷新 DIV 而 DIV 中没有另一个页面
Is it possible to refresh a DIV without another page inside the DIV?
正如标题所说，是否可以刷新div，而无需在div内使用其他HTML或php页面？
例如，这是使用JavaScript可以完成的操作：
$(document).ready(function () {
$('#mydiv').delay(10000).load('page.php');
});
我的 Div 显示/保存从 mysql 数据库中提取的数据，其中没有page.php。
我已经搜索了这个，所有结果都与我上面发布的结果相似！
这甚至可能吗，如果是，如何？
编辑：
当前显示在 DIV 中的数据是项目的$end_time。 $end_time基本上是一个存储在MySQL数据库中的datetime。 $end_time已经在滴答作响（使用JavaScript的倒数计时器）。有一个按钮，每当按下时，1分钟将被添加到mysql中的$end_time中。
但是当按下按钮时，我需要刷新/重新加载页面才能查看更改（在这种情况下，倒数计时器增加了 1 分钟）。
我需要做的是在按下该按钮后重新加载 DIV，以便所有用户都可以看到倒数计时器已添加 1 分钟，而无需重新加载或刷新页面。
编辑：
这是我的完整代码，它应该工作，它将从 mysql 数据库中提取数据，所以我对项目的这一部分没有问题：
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
?>
<?php date_default_timezone_set('Europe/London'); ?>
<?php
session_start();
// Run a select query to get my letest 6 items
// Connect to the MySQL database
include "config/connect.php";
$dynamicList = "";
$sql = "SELECT * FROM item ORDER BY id";
$query = mysqli_query($db_conx, $sql);
$productCount = mysqli_num_rows($query); // count the output amount
if ($productCount > 0) {
while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
$id = $row["id"];
$product_name = $row["product_name"];
$date_added = date("Y-m-d", strtotime($row["date_added"]));
$end_date = date("F d Y H:i:s T", strtotime($row["end_date"]));
$price = $row["price"];
$dynamicList .= '<div>' . $end_date . '
</div>';
}
} else {
$dynamicList = "No Records";
}
?>
<?php
$date = $end_date;
$exp_date = strtotime($date);
$now = time();
if ($now < $exp_date ) {
?>
<script>
// Count down milliseconds = server_end - server_now = client_end - client_now
var server_end = <?php echo $exp_date; ?> * 1000;
var server_now = <?php echo time(); ?> * 1000;
var client_now = new Date().getTime();
var end = server_end - server_now + client_now; // this is the real end time
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24
var timer;
function showRemaining()
{
var now = new Date();
var distance = end - now;
if (distance < 0 ) {
clearInterval( timer );
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor( (distance % _day ) / _hour );
var minutes = Math.floor( (distance % _hour) / _minute );
var seconds = Math.floor( (distance % _minute) / _second );
var countdown = document.getElementById('countdown');
countdown.innerHTML = '';
if (days) {
countdown.innerHTML += 'Days: ' + days + '<br />';
}
countdown.innerHTML += 'Hours: ' + hours+ '<br />';
countdown.innerHTML += 'Minutes: ' + minutes+ '<br />';
countdown.innerHTML += 'Seconds: ' + seconds+ '<br />';
}
timer = setInterval(showRemaining, 1000);
</script>
<?php
} else {
echo "Times Up";
}
?>
<div id="result"><div id="countdown"></div></div>
<?php echo $end_date; ?> </br>
<?php echo $dynamicList; ?>
<script src="ajax_link.js" type="text/javascript"></script>
<div id="ajaxlink" onclick="loadurl('timeadder.php')">Click here</div>
<input type="submit" name="ajaxlink" id="ajaxlink" value="Submit" onclick="loadurl('timeadder.php')"/>
这是页面的代码，它将向数据库添加 1 分钟，这也应该这样做：
计时器.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
?>
<?php
session_start();
// Run a select query to get my letest 6 items
// Connect to the MySQL database
include "config/connect.php";
$sql = "UPDATE item SET end_date = DATE_ADD(end_date,INTERVAL 1 MINUTE) WHERE id = 1;";
$query = mysqli_query($db_conx, $sql);
?>
我需要做的就是刷新保存计时器的 DIV countdown。
我希望现在有人可以提供帮助。
这个问题不清楚，但是如果您尝试定期将 php 加载到div 中，则可以使用setInterval
setInterval(
function(){
$('#mydiv').load('page.php');
},10000);
编辑：
好的，那么 Id 建议Jquery.get
setInterval(function(){
$.get('page.php',function(timerValue){
$('#mydiv').html(timerValue);
});
},1000);
修改为在OP中集成新发布的代码：
在您的 while{} 语句中，您在结束日期周围粘贴了div 标签，但没有简单的方法来识别div 属于哪个项目的结束日期。
建议：
$dynamicList .= '<div id="ed-' .$id. '">' . $end_date . '</div>';
这将在每个结束日期周围创建一个唯一命名的div。现在，您可以通过jQuery访问特定的结束日期，因此：
$('#ed-3').html(newdata);
另外，不应该这样：
<div id="result"><div id="countdown"></div></div>
<?php echo $end_date; ?> </br>
像这样：
<div id="result"><div id="countdown"><?php echo $end_date; ?></div></div>
</br>
.HTML：
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var item_id = 0;
$(document).ready(function() {
$('#mybutt').click(function() {
item_id = $(this).attr('id').split('-')[1];
updateTimer();
});
}); //END $(document).ready()
function updateTimer() {
$.ajax({
type: 'POST',
url: 'getenddate.php`,
data: `item=` + item_id,
success: function(fromPhp) {
$('#countdown').html(fromPhp);
//or, to change this item's end date as echoed out from $dynamicList:
//$('#ed-' + item_id).html(fromPHP);
} //END success fn
}); //END AJAX code block
adder = 0;
} //END updateTimer fn
</script>
</head>
<body>
<div id="countdown"></div>
<input id="item-12" type="button" value="Add One Minute">
</body>
</html>
PHP： getenddate.php
<?php
//item is NAME of var being posted over (key),
//item_id is the var contents on the client side ONLY
//$_POST['item'] is var contents (value) as it arrives on PHP side
$itemid = $_POST['item'];
// ** FIXME the query contains a SQL injection vuln,
// ** please untaint $itemid before using
//code to return current time value from database - runs every time
$end = mysql_result(mysql_query("SELECT `end_date` FROM item WHERE `id` = '$item' "), 0);
echo $end;
如果我理解正确，你想改变DIV的内容，不管里面有什么。这可以像这样完成：
在 HTML 中，您有类似以下内容：
<div id="mydiv">My old content, no sites here</div>
在JS（jQuery启用）中你做的（例如在ready函数中）：
$(document).ready(function () {
$('#mydiv').html("This content is brand new");
});
上面代码的js小提琴
.html()函数删除该标记的旧内容，并将其替换为新内容。
例如，如果要显示当前秒数，可以执行以下操作：
$(document).ready(function () {
setInterval(function(){
// change time
$('#mydiv').html("Seconds: "+ new Date().getSeconds());
},1000);
});
带计数器的代码的js小提琴
这应该几乎正是您正在寻找的（未经测试）：
.HTML：
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var adder = 0; //Global var -- outside document.ready
$(document).ready(function() {
$('#mybutt').click(function() {
adder++;
updateTimer();
});
}); //END $(document).ready()
function updateTimer() {
$.ajax({
type: 'POST',
url: 'myphpprocessor.php',
data: 'addval=' + adder,
success: function(fromPhp) {
$('#theTimer').html(fromPhp);
} //END success fn
}); //END AJAX code block
adder = 0;
} //END updateTimer fn
</script>
</head>
<body>
<div id="theTimer"></div>
<input id="mybutt" type="button" value="Add One Minute">
</body>
</html>
PHP：myphpprocessor.php
<?php
$howmuch = $_POST['addval'];
if ($howmuch > 0) {
//code to update database by the amount
// - only runs if howmuch has a value
}
//code to return current time value from database - runs every time
$thetime = mysql_query('SELECT etc etc etc');
echo $thetime;
笔记：
- 数据库只需要存储要添加到当前时间的分钟数
- 然后，您的 PHP 代码可以：
（a） 查询数据库要添加的分钟数：$num_分钟_添加
（b） 使用当前时间
创建新的日期对象（c） 将$num分钟添加到（b）（d） 回声回馈值
相关文章：
- 通过DRAGGABLE将一个DIV移动到另一个DIF下?(CSS，JQuery）
- DIV怎么能像Javascript中的另一个元素一样工作呢
- 限制一个DIV出现在另一个特定大小的DIV中
- 使用jQuery将DIV放在另一个DIV上
- 更改另一个 DIV 之前的 DIV 宽度
- JQuery 将一个 Div 值的百分比添加到另一个值
- jQuery - 在另一个 DIV 中定位特定的 DIV
- jQuery-检查外部页面上是否存在DIV，如果存在，则加载DIV，否则加载另一个
- 在悬停时显示一个DIV，在悬停的另一个DIV.使用CSS
- 将DIV内容复制到另一个DIV
- 当调用DIV时，将一个DIV加载到另一个的顶部
- 通过点击隐藏DIV，并通过JavaScript显示另一个DIV
- 如果另一个存在jQuery，则隐藏Div
- 同时换掉两个Div，换成另一个Div并保持循环一段固定的秒数
- 自定义Div滑块运行过快，但仅当从另一个浏览器选项卡返回时
- 使用 javascript 在 DOM 中隐藏 DIV 中的文本，具体取决于另一个 DIV 中的文本
- 如何根据另一个 DIV 内容的可见性显示 DIV 内容
- Javascript 没有将另一个页面加载到 DIV 中
- DIV 滚动到达页脚(另一个 DIV）后停止滚动
- PHP :将值和 Div 保存到另一个页面
