是否可以在DIV中没有其他页面的情况下刷新DIV?

时间:2013-09-19 15:01:08

标签: javascript jquery ajax

正如标题所说,是否有可能刷新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

我希望有人能提供帮助。

5 个答案:

答案 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

以上是一个完全正常,独立,可复制的示例。只需将其复制/粘贴到两个文件中即可:

  1. index.html(或test.php,或其他)和
  2. receiving_file.php - 如果要重命名此文件,还必须更改文件1中AJAX代码块中的名称。

  3. 以下是获取AJAX基础知识的一些好帖子:

    A simple example

    More complicated example

    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");
});

jsFiddle of the code above

.html()功能会删除该标记的旧内容,并将其替换为新内容。

例如,如果您想显示当前秒数,则可以执行以下操作:

$(document).ready(function () {
    setInterval(function(){
      // change time
      $('#mydiv').html("Seconds: "+ new Date().getSeconds());
    },1000); 
});

jsFiddle of the code with counter

答案 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;

备注:

  1. 数据库只需要存储要添加到当前时间的分钟数
  2. 您的PHP代码可以:
    (a)在DB中查询要添加的分钟数:$ num_mins_to_add
    (b)创建一个具有当前时间的新日期对象
    (c)将$ num_mins_to_add添加到(b) (d)ECHO支持价值