通过AJAX setInterval函数调用PHP函数

时间:2018-04-11 15:28:44

标签: javascript php jquery ajax

我想在平台上每5秒回复一次在线用户数量。它是用会话制作的。这是PHP函数,当我刷新页面时它正在工作。我想通过AJAX调用此函数来显示数据而不刷新页面。此函数位于index.php文件中:

function users_online() {

    global $con;

    $session = session_id();
    $time = time();
    $time_out_in_seconds = 30;
    $time_out = $time - $time_out_in_seconds;

    $query = "SELECT * FROM users_online WHERE session = '$session'";
    $send_query = mysqli_query($con, $query);
    $count = mysqli_num_rows($send_query);

    if($count == NULL) {
        mysqli_query($con, "INSERT INTO users_online(session, time) VALUES('$session','$time')");
    } else {
        mysqli_query($con, "UPDATE users_online SET time = '$time' WHERE session = '$session'");
    }

    $users_online_query =  mysqli_query($con, "SELECT * FROM users_online WHERE time > '$time_out'");
    echo $count_user = mysqli_num_rows($users_online_query);
}

整个index.php:

<?php 
include("includes/header.php");
//include("functions.php");

function users_online() {

    global $con;

        $session = session_id();
        $time = time();
        $time_out_in_seconds = 30;
        $time_out = $time - $time_out_in_seconds;

        $query = "SELECT * FROM users_online WHERE session = '$session'";
        $send_query = mysqli_query($con, $query);
        $count = mysqli_num_rows($send_query);

            if($count == NULL) {

            mysqli_query($con, "INSERT INTO users_online(session, time) VALUES('$session','$time')");


            } else {

            mysqli_query($con, "UPDATE users_online SET time = '$time' WHERE session = '$session'");


            }

        $users_online_query =  mysqli_query($con, "SELECT * FROM users_online WHERE time > '$time_out'");
        echo $count_user = mysqli_num_rows($users_online_query);
}
$message_obj = new Message($con, $userLoggedIn);

if(isset($_GET['u']))
    $user_to = $_GET['u'];
else {
    $user_to = $message_obj->getMostRecentUser();
    if($user_to == false)
        $user_to = 'new';
}

if($user_to != "new")
    $user_to_obj = new User($con, $user_to);

if(isset($_POST['post_message'])) {

    if(isset($_POST['message_body'])) {
        $body = mysqli_real_escape_string($con, $_POST['message_body']);
        $date = date("Y-m-d H:i:s");
        $message_obj->sendMessage($user_to, $body, $date);
    }

}

if(isset($_POST['post'])){

    $uploadOk = 1;
    $imageName = $_FILES['fileToUpload']['name'];
    $errorMessage = "";

    if($imageName != "") {
        $targetDir = "assets/images/posts/";
        $imageName = $targetDir . uniqid() . basename($imageName);
        $imageFileType = pathinfo($imageName, PATHINFO_EXTENSION);

        if($_FILES['fileToUpload']['size'] > 10000000) {
            $errorMessage = "Sorry your file is too large";
            $uploadOk = 0;
        }

        if(strtolower($imageFileType) != "jpeg" && strtolower($imageFileType) != "png" && strtolower($imageFileType) != "jpg") {
            $errorMessage = "Sorry, only jpeg, jpg and png files are allowed";
            $uploadOk = 0;
        }

        if($uploadOk) {
            if(move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $imageName)) {
                //image uploaded okay
            }
            else {
                //image did not upload
                $uploadOk = 0;
            }
        }

    }

    if($uploadOk) {
        $post = new Post($con, $userLoggedIn);
        $post->submitPost($_POST['post_text'], 'none', $imageName);
    }
    else {
        echo "<div style='text-align:center;' class='alert alert-danger'>
                $errorMessage
            </div>";
    }

}


 ?>
<script>
function loadUsersOnline() {
    $.get("index.php?onlineusers=result", function(data){
        $(".usersonline").text(data);
    });
}
setInterval(function(){
    loadUsersOnline();
},5000);
</script>
    <div class="user_details column">
        <a href="<?php echo $userLoggedIn; ?>">  <img src="<?php echo $user['profile_pic']; ?>"> </a>

        <div class="user_details_left_right">
            <a href="<?php echo $userLoggedIn; ?>">
            <?php 
            echo $user['first_name'] . " " . $user['last_name'];

             ?>
            </a>
            <br>
            <?php echo "Posts: " . $user['num_posts']. "<br>"; 
            echo "Likes: " . $user['num_likes']. "<br>";

            ?>
            <p>Users Online: <span class='usersonline'></span><?php users_online(); ?></p>
        </div>

    </div>
<!-- I called the function above and that'the way it works by refreshing the page but the ajax script should work between spans -->
    <div class="main_column column">
        <form class="post_form" action="index.php" method="POST" enctype="multipart/form-data">
            <textarea name="post_text" id="post_text" placeholder="Got something to say?"></textarea>
            <input type="submit" name="post" id="post_button" value="Post">
            <div class="file-drop-area">
                <span class="fake-btn">Choose files</span>
                <span class="file-msg js-set-number">or drag and drop files here</span>
            <input type="file" name="fileToUpload" id="fileToUpload" class="file-input">
            </div>
            <script  src="assets/js/index.js"></script>
        </form>

        <div class="posts_area"></div>

        <!-- <button id="load_more">Load More Posts</button> -->
        <img id="loading" src="assets/images/icons/loading.gif">


    </div>

    <div class="user_details column">

        <h4>Popular</h4>

        <div class="trends">
            <?php 
            $query = mysqli_query($con, "SELECT * FROM trends ORDER BY hits DESC LIMIT 9");

            foreach($query as $row) {

                $word = $row['title'];
                $word_dot = strlen($word) >= 14 ? "..." : "";

                $trimmed_word = str_split($word, 14);
                $trimmed_word = $trimmed_word[0];

                echo "<div style'padding: 1px'>";
                echo $trimmed_word . $word_dot;
                echo "<br></div><br>";


            }

            ?>
        </div>


    </div>


    <div class="user_details column" id="conversations">
            <h4>Conversations</h4>

            <div class="loaded_conversations">
                <?php echo $message_obj->getConvos(); ?>
            </div>
            <br>
            <a href="messages.php?u=new">New Message</a>

        </div>




    <script>
    var userLoggedIn = '<?php echo $userLoggedIn; ?>';

    $(document).ready(function() {

        $('#loading').show();

        //Original ajax request for loading first posts 
        $.ajax({
            url: "includes/handlers/ajax_load_posts.php",
            type: "POST",
            data: "page=1&userLoggedIn=" + userLoggedIn,
            cache:false,

            success: function(data) {
                $('#loading').hide();
                $('.posts_area').html(data);
            }
        });

        $(window).scroll(function() {
        //$('#load_more').on("click", function() {

            var height = $('.posts_area').height(); //Div containing posts
            var scroll_top = $(this).scrollTop();
            var page = $('.posts_area').find('.nextPage').val();
            var noMorePosts = $('.posts_area').find('.noMorePosts').val();

            if ((document.body.scrollHeight == document.body.scrollTop + window.innerHeight) && noMorePosts == 'false') {
            //if (noMorePosts == 'false') {
                $('#loading').show();

                var ajaxReq = $.ajax({
                    url: "includes/handlers/ajax_load_posts.php",
                    type: "POST",
                    data: "page=" + page + "&userLoggedIn=" + userLoggedIn,
                    cache:false,

                    success: function(response) {
                        $('.posts_area').find('.nextPage').remove(); //Removes current .nextpage 
                        $('.posts_area').find('.noMorePosts').remove(); //Removes current .nextpage 
                        $('.posts_area').find('.noMorePostsText').remove(); //Removes current .nextpage 

                        $('#loading').hide();
                        $('.posts_area').append(response);
                    }
                });

            } //End if 

            return false;

        }); //End (window).scroll(function())


    });

    </script>




    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

当您使用AJAX提取数据时,您似乎取回了index.php的内容,然后将其复制到范围中。您的index.php不包含对get变量的检查,并且函数永远不会被调用。因此,在index.php的顶部添加这样的一行,在<?php后面的下一行, include("includes/header.php");之前添加

if ( array_key_exists( "onlineusers", $_GET ) &&
     "result" == $_GET[ "onlineusers" ] ) {
    echo users_online();
    exit();
}

另外,请注意,我建议你查看COUNT() MySQL函数来简化你的查询,你的MySQL服务器会感谢你没有为每个查询不必要地请求完整的表: / p>

$users_online_query =  mysqli_query($con, "SELECT COUNT( * ) FROM users_online WHERE time > '$time_out'");

到目前为止,除了所有其他评论者之外,我还建议在此应用程序中认真考虑性能问题。根据您期望拥有的用户数量,服务器上的负担可能会很大。另一方面,一些精心调整的缓存设置可以创造奇迹。例如,将AJAX URL上的到期时间设置为5秒允许所有中继站将该数字缓存5秒,因此即使您有10k用户同时请求相同的内容,其中大多数将由某个地方的缓存提供服务。 / p>