Question

我找到了这3个文件，它是一个插件，当用户点击按钮并使用ajax和json来加载更多数据时。它运作良好，只有一个问题。它不是在屏幕上显示数据，而是仅显示括号()。问题是，我不知道如此好的javascript来解决问题，如果它是在js中，我请求你的帮助。如果有人能解决它，我会很感激。

插件的来源是this

的index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Load more</title>
</head>

<body>

<div class="articles">
    <div class="items">
        <div class="item">
            <h3><span data-field="title"></span> (<span data-field="id"></span>)</h3>
            <p data-field="description"></p>
        </div>
    </div>
    <a href="#" class="items-load">Load more</a>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="loadmore.js"></script>
<script>
    $('.articles').loadmore({
        source: 'articles.php',
        step: 2
    });
</script>
</body>
</html>

articles.php

<?php
header('Content-Type: application/json');
include('db_conx.php');
?>
<?php

$articles = array();

$start = isset($_GET['start']) ? (int)$_GET['start'] - 1 : 0;
$count = isset($_GET['count']) ? (int)$_GET['count'] : 1;

$article = mysqli_query($db_conx, "SELECT * FROM articles LIMIT {$start}, {$count}");
$articlesTotal = mysqli_query($db_conx, "SELECT COUNT(*) as count FROM articles");
$articlesTotal = mysqli_fetch_assoc($articlesTotal);
$articlesTotal = $articlesTotal['count'];

if ($articlesCount = $article->num_rows) {
    $articles = $article->fetch_all();
}

echo json_encode(array(
    'items' => $articles,
    'last' => ($start + $count) >= $articlesTotal ? true : false,
    'start' => $start,
    'count' => $count
));
?>

loadmore.js

(function($) {
    "use strict";

    $.fn.loadmore = function(options) {
        var self = this,
            settings = $.extend({
                source: '',
                step: 2
            }, options),

            stepped = 1,
            item = self.find('.item'),
            items = self.find('.items'),

            finished = function() {
                self.find('.items-load').remove();
            },

            append = function(value) {
                var name, part;

                item.remove();

                for (name in value) {
                    if (value.hasOwnProperty(name)) {
                        part = item.find('*[data-field="'+name+'"]');

                        if (part.length) {
                            part.text(value[name]);
                        }
                    }
                }

                item.clone().appendTo(items);
            },

            load = function(start, count) {
                $.ajax({
                    url: settings.source,
                    type: 'get',
                    dataType: 'json',
                    data: {start: start, count: count},
                    success: function(data) {
                        var items = data.items;

                        if (items.length) {
                            $(items).each(function(index, value) {
                                append(value);
                            });

                            stepped = stepped + count;
                        }

                        if (data.last === true) {
                            finished();
                        }
                    }
                });
            };

        if (settings.source.length) {
            self.find('.items-load').on('click', function() {
                load(stepped, settings.step);
                return false;
            });

            load(1, settings.step);
        } else {
            console.log('Source required to load more.');   
        }
    };

}(jQuery))

数据库

id int not null auto_increment primary key,
title varchar(200),
description text

最好有至少10个以上的插页才能正确使用并理解它！

Answer 1

找到解决方案..问题出在第19行的articles.php文件而不是

if ($articlesCount = $article->num_rows) {
    $articles = $article->fetch_all();
}

它必须声明fetch是assoc，所以这里是解决方案：

if ($articlesCount = $article->num_rows) {
    $articles = $article->fetch_all(MYSQLI_ASSOC);
}

Loadmore插件无法显示正确的项目

1 个答案: