使用 Ajax 和来自 URL 的帖子 ID 加载博客文章

Question

我正在尝试使用 ajax 加载博客文章，这些文章基于 URL id 特定于该博客文章。我在页面加载时有以下内容：

    <script>    
    var userLoggedIn = '<?php echo $userLoggedIn; ?>';
    var PostIDFromURL = $_GET['id'];

    $(document).ready(function(){

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

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

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

        });

        $(window).scroll(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') {
                $('#loading').show();

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

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

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

        });

        } //End if

        return false;

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


    });

    </script>

处理程序ajax_load_blog_posts.php如下：

$limit = 8; //Number of posts to be loaded per call
$PostIDFromURL = $_GET['id'];

$posts = new Blog_Post($con, $_REQUEST['userLoggedIn']);
$posts->loadBlogPosts($_REQUEST, $limit, $PostIDFromURL);

公共函数loadBlogPosts()如下：

public function loadBlogPosts($data, $limit, $PostIDFromURL) {

    $page = $data['page']; 
    $userLoggedIn = $this->user_obj->getUsername();
    $PostIDFromURL = $PostIDFromURL['id'];

    if($page == 1) 
        $start = 0;
    else 
        $start = ($page - 1) * $limit;


    $str = ""; //String to return 
    $data_query = mysqli_query($this->con, "SELECT * FROM blog_posts WHERE deleted='no' AND admin_panel_id='$PostIDFromURL' ORDER BY id DESC");

    if(mysqli_num_rows($data_query) > 0) { ...blah blah blah

我没有收到任何错误，只是看到加载图标滚动。我知道只要我不请求特定于该文章 ID 的帖子，我就可以检索所有这些 b/c。我认为问题在于数据被发送到这里：data: "page=1&userLoggedIn=" + userLoggedIn + PostIDFromURL, 和上面的声明var PostIDFromURL = $_GET['id'];

我已经完成了我能做或找到的任何事情，我们将不胜感激。

问候。

Answer 1

如果没有您的 HTML，您无法完全确定该部分的结构。尝试使用您的 JS 代码创建一个示例（修改为使用 1 个接受参数的 ajax 函数）。我也没有调用你的 PHP 文件，只是做一个示例测试 Ajax 调用来获取 JSON 数据......看看这些是否有帮助。谢谢！

var userLoggedIn = '2';
var PostIDFromURL = 1;

var ajaxCall = function(page, successFunction) {

  //Original ajax request for loading first posts
  $.ajax({
    url: "https://api.myjson.com/bins/1c334n",
    type: "GET", // CHANGED TO GET FOR TEST..
    data: "page=" + page + "&userLoggedIn=" + userLoggedIn + "&id=" + PostIDFromURL,
    cache: false,
    success: successFunction
  });

};

var initSuccessMethod = function(data) {

  $('#loading').hide();
  $('.posts_area').html(data);

};

var scrollMethod = function(response) {

  $('.posts_area').find('.nextPage').remove(); //Removes current .nextpage
  $('.posts_area').find('.noMorePosts').remove(); //Removes current .nextpage

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

};

var timeOut = null;

$(document).ready(function() {

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

  ajaxCall(1, initSuccessMethod);

  $(window).scroll(function() {

    clearTimeout(timeOut);
    var height = $('.posts_area').height(); //Div containing posts
    var scroll_top = $(this).scrollTop();
    var page = 2;
    var noMorePosts = false;

    timeOut = setTimeout(function() {
      $('#loading').show();
      ajaxCall(page, scrollMethod);
    }, 300);

    return false;

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

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:1500px;">
  <div id="loading" style="position:fixed;float:left;left:10px;width:100%;text-align:center;">
    <img src="https://m.popkey.co/4a2b21/YX5xG_s-200x150.gif?c=popkey-web&p=popkey&i=sciencetech-ent&l=search&f=.gif" />
  </div>
  <div class="posts_area" style="height:500px;">
  </div>
</div>