通过PHP和jQuery的HTML注入出错了

时间:2018-09-07 09:35:20

标签: javascript php jquery html css

我是初学者,我试图从数据库中动态加载成功的东西。然后,我的下一个目标是使用javascript实现无限滚动,但是我认为HTML代码被注入到错误的地方或其他地方,因为当我使用data-columns并尝试通过滚动加载更多内容时,样式变得很疯狂。如果将其取出,则可以很好地加载,但是页面的样式无处不在。

屏幕截图应该是什么样子

当我开始加载4个项目,然后到达底部页面时再加载4个项目时的外观

在其中注入数据的Index.php html

<div id="fh5co-main">
    <div class="container">

        <div class="row">

            <div id="fh5co-board" class="results" data-columns>


            </div>
        </div>
    </div>
</div>

用于index.php中无限负载的Javascript

<script type="text/javascript">


    var start = 0;
    var limit = 4;
    var reachedMax = false;

    $(window).scroll(function () {
        if($(window).scrollTop() == $(document).height() - $(window).height())
            getData();

    });

    $(document).ready(function () {
        getData();

    });

    function getData() {
        if(reachedMax)
            return;

        $.ajax({
            url: 'load_more.php',
            method: 'POST',
            dataType: 'text',
            data: {
                getData: 1,
                start: start,
                limit: limit
            },
            success: function (response) {
                if (response == "reachedMax")
                    reachedMax = true;
                else {
                    start += limit;
                    $(".results").append(response);


                }

            }
        });

    }



</script>

load_more.php

<?php include_once "includes/functions.php"?>

<?php

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

    $start = $_POST['start'];
    $limit = $_POST['limit'];

    $query = "SELECT title, image, text FROM posts LIMIT $start, $limit";
    $result = mysqli_query(DatabaseConnect(), $query);

    if (mysqli_num_rows($result) > 0) {
        $response = "";

        while ($data = mysqli_fetch_array($result)) {

            $response .= '
            <div class="item">
        <div class="animate-box">
            <a href="images/' . $data['image'] . '" class="image-popup fh5co-board-img" title="' . $data['title'] . '"><img src="images/' . $data['image'] . '" alt="image"></a>
        </div>
        <h3>' . $data['title'] . '</h3>
        <div class="fh5co-desc">' . $data['text'] . '</div>
    </div>';
        }

        exit($response);

    } else
        exit('reachedMax');


}

0 个答案:

没有答案