从URL使用Ajax和Post id加载博客帖子

时间:2018-03-30 15:59:36

标签: php ajax mysqli

我正在尝试使用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

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

在我能做或找到的最后,我们将非常感谢您的任何帮助。

的问候。

1 个答案:

答案 0 :(得分:0)

没有您的HTML,不完全确定您是如何构建该部分的。尝试使用您的JS代码创建一个示例(修改为使用接受params的1 ajax函数)。我也没有调用你的PHP文件,只是做了一个示例测试Ajax调用,它获取了JSON数据......看一看,看看是否有任何帮助。谢谢!

&#13;
&#13;
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()

});
&#13;
<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>
&#13;
&#13;
&#13;