正如标题所说,是否有可能刷新div而没有div中的另一个html或php页面?
例如,这可以使用javascript完成:
$(document).ready(function () {
$('#mydiv').delay(10000).load('page.php');
});
我的Div显示/保存从mysql数据库中提取的数据,并且其中没有page.php
。
我搜索了这个,所有的结果与我上面发布的结果相似!
这是否可能,如果是这样的话?
修改
当前在DIV中显示的数据是项目的$end_time
。 $end_time
基本上是datetime
,存储在mysql数据库中。 $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分钟添加到数据库的页面的代码,这个应该也应该是这样的:
timeadder.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
。
我希望有人能提供帮助。
答案 0 :(得分:2)
.load()
方法没有按照您的想法执行。
您的问题表明您希望更新MySQL数据库中的div - 但如果您使用jQuery .load()
方法,则不会发生这种情况,只有在使用AJAX时它才会起作用。这是因为服务器必须运行PHP(mysql查询),而.load()
在浏览器上运行并导入页面。浏览器请求执行PHP(以及返回数据)的唯一方法是通过AJAX。
你熟悉AJAX吗?如果你已经知道了,请原谅我,但万一你不知道:
Ajax将数据发布到外部php文件,该文件处理收到的数据并发回答案。它看起来像这样:
文件#1:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#Sel').change(function() {
var opt = $(this).val();
var someelse = 'Hello';
var more_stuff = 'Goodbye';
$.ajax({
type: "POST",
url: "receiving_file.php",
data: 'selected_opt=' + opt + '&something_else=' +someelse+'&more_stuff='+more_stuff,
success:function(data){
alert('This was sent back: ' + data);
//Next line adds the data from PHP into the DOM
$('#somediv').html(data);
}
});
});
});
</script>
</head>
<body>
<div id="somediv">
<select id = "Sel">
<option value ="Song1">default value</option>
<option value ="Song2">Break on through</option>
<option value ="Song3">Time</option>
<option value ="Song4">Money</option>
<option value="Song5">Saucerful of Secrets</option>
</select>
</div><!-- #somediv -->
文件#2:receiving_file.php
<?php
//This is where you get the data from the browser
$recd = $_POST['selected_opt'];
$uid = $_POST['someelse'];
//This is where you do your MYSQL database changes, for example:
//mysql_query("UPDATE `users` SET `fav_song`='$recd' WHERE `user_id` = '$uid'");
//When done, you can echo back some new HTML, like this:
$r = '<h1>You chose:</h1>';
$r .= '<p>' . $recd . '</p>'; //adds to $r
echo $r; //Use ECHO to send data back to the browser
以上是一个完全正常,独立,可复制的示例。只需将其复制/粘贴到两个文件中即可:
以下是获取AJAX基础知识的一些好帖子:
Populate dropdown 2 based on selection in dropdown 1
请上传任何有用的帖子。
答案 1 :(得分:1)
修改为在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'];
//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;
请记住向所有对您有帮助的答案进行投票
答案 2 :(得分:0)
问题不清楚,但是如果你试图定期将php加载到div中,可以使用setInterval
setInterval(
function(){
$('#mydiv').load('page.php');
},10000);
编辑:
好的,然后我建议Jquery.get
setInterval(function(){
$.get('page.php',function(timerValue){
$('#mydiv').html(timerValue);
});
},1000);
答案 3 :(得分:0)
如果我理解你,你想改变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");
});
.html()
功能会删除该标记的旧内容,并将其替换为新内容。
例如,如果您想显示当前秒数,则可以执行以下操作:
$(document).ready(function () {
setInterval(function(){
// change time
$('#mydiv').html("Seconds: "+ new Date().getSeconds());
},1000);
});
答案 4 :(得分:0)
这几乎应该是您正在寻找的(未经测试):
<强> 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;
备注:强>