如何使用jQuery和PHP使用setInterval按顺序调用数组项?

时间:2013-10-18 06:50:37

标签: php jquery ajax

我有以下index.php文件:

<html lang="en">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        var auto_refresh = setInterval(function (){
          //alert("abc");
          $('#mydiv').load('xyz.php').fadeIn("slow");
        }, 1000); 
      });
    </script>
  </head>
  <body>
    <div id="mydiv"> </div>
  </body>
</html>

在上面的文件中,我试图在1秒后调用我的xyz.php文件。它的工作正常。 以下是我的xyz.php文件。

<?php
//echo rand();
$questions=array(
                 "Array Item 1",
                 "Array Item 2",
                 "Array Item 3");
?>

之前我曾调用rand函数,每次调用此文件后,每次都会生成随机数。现在我已经评论过了。我的要求已经改变了。现在我希望在第一次调用此文件时,回显数组项1。第二次回显数组项2。第三次尝试时类似的数组第3项。在此setInterval之后不应该调用此php文件。

我需要你的帮助。

5 个答案:

答案 0 :(得分:3)

在JS中:

var count = 0;

$(document).ready(function(){
var auto_refresh = setInterval(function (){
    $('#mydiv').load('xyz.php', {count: count}, function () {
        count = count + 1;

        //after three attempts it won't call php file.
        if (count > 2) {
            clearInterval(auto_refresh);
        }
    }).fadeIn("slow");
    }, 1000); 
});

在PHP中:

<?php
$questions=array(
                 "Array Item 1",
                 "Array Item 2",
                 "Array Item 3");

if (isset($_POST["count"])) {
    echo $questions[intval($_POST["count"])];
}
?>

答案 1 :(得分:1)

以上所有答案都应该有效,但是调用ajax 3次有什么用?您的要求是在区间中逐个显示结果,

这是更好的解决方案,

你的.php文件中的

<?php
//echo rand();
$questions=array(
                 "Array Item 1",
                 "Array Item 2",
                 "Array Item 3");

echo json_encode($questions); // here is the change
?>

和.html文件

<html lang="en">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         $.getJSON( "xyz.php", function( data ) { 
            // using $.getJSON rather of $.load
        // note that you can use any of jquery ajax method. with required changes,  
        $('#mydiv').fadeIn("slow");

        $.each( data, function( key, val ) {
           setInterval(function (){
              $('#mydiv').append( val + "<br>"); // or whatever is your formatting 
               });      
        });
         });
      });
    </script>
  </head>
  <body>
    <div id="mydiv"> </div>
  </body>
</html>

答案 2 :(得分:0)

在第二页上,您可以使用会话

    session_start();
    if(!isset($_SESSION['count'])){
        $_SESSION['count']=0;
    }
    else
    {
        $_SESSION['count'] = $_SESSION['count'] +1;
    }

    $questions=array(
             "Array Item 1",
             "Array Item 2",
             "Array Item 3");
    $qcount=count($question);

    if($qcount< $_SESSION['count']){
        // NA
    }
    else{
        echo $question[$_SESSION['count']];
    }

我希望这会帮助你......

答案 3 :(得分:0)

也许你可以使用ajax:

    <html lang="en">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var attemp_count = 0;

            var auto_refresh = setInterval(function() {
                $.ajax({
                    url: 'xyz.php',
                    type: 'POST',
                    data: {attemp_count: attemp_count++}
                }).done(function(data) {
                        console.group('Attemp ' + attemp_count);
                        console.log(data);
                        console.groupEnd();
                        $('#mydiv').text(data);
                    });
                if(attemp_count > 2) {
                    clearInterval(auto_refresh);
                }
            }, 1000);
        });
    </script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>

和php后端文件:

<?php
//echo rand();
$questions = array(
    "Array Item 1",
    "Array Item 2",
    "Array Item 3"
);

if (array_key_exists('attemp_count', $_POST) && array_key_exists($_POST['attemp_count'], $questions)) {
    echo $questions[$_POST['attemp_count']];
}

如果您使用会话,则浏览器中的两个选项卡可能会出现问题。就我而言,您可以避免它,因为每个选项卡将作为独立应用程序运行。

答案 4 :(得分:0)

我很慢......但是花时间研究它,所以不妨现在发布它。

<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var counter = 0;
        var auto_refresh = setInterval(function (){         
            $.post( "xyz.php", { counter: counter } ).done(function(data){
                $('#mydiv').html(data);
            });;
            counter++;
            if (counter >= 3){
                clearInterval(auto_refresh);
            }
        },1000);
    });
</script>
</head>
<body>
    <div id="mydiv"> </div>
</body>
</html>

和xyz.php

<?php
$counter = $_POST['counter'];
$questions=array(
                 "Array Item 1",
                 "Array Item 2",
                 "Array Item 3");
echo $questions[$counter];
?>