Question

嗨，我是javascript的noob并且正在练习提高我的技能。

我制作了一个示例项目，并使用getJSON从json中获取数据。

它运行正常，但我想要的是先显示第三个索引数据，然后依次点击loadMore按钮。

首先，我将拥有＆＃34; 3列表项＆＃34;填充json之后，我需要每2个li填充loadMore点击...这里是我的json数组

[
{
"imagepath" : "sample url",
"heading" : "sample heading",
"details" : "sample details"
},
{
"imagepath" : "sample url",
"heading" : "sample heading",
"details" : "sample details"
},
{
"imagepath" : "sample url",
"heading" : "sample heading",
"details" : "sample details"
},
{
"imagepath" : "sample url",
"heading" : "sample heading",
"details" : "sample details"
},
{
"imagepath" : "sample url",
"heading" : "sample heading",
"details" : "sample details"
},
{
"imagepath" : "sample url",
"heading" : "sample heading",
"details" : "sample details"
},
{
"imagepath" : "sample url",
"heading" : "sample heading",
"details" : "sample details"
},
]

这是示例代码

$(document).ready(function(){
                $('#fetchit').click(function(){
                $.ajax({
                    url:"one.json",
                    cache: false,
                    dataType : "json",
                    success :function(){
                        //alert('bf c')
                        $('.hold').empty();
                        $.getJSON("one.json",function(data){
                            $.each(data ,function(i,value){
                                var list ="<li>" + "<img src'" + value.imagepath + "' alt=''/>" + "<span>" + value.heading + "</span>" + "<span>" + value.details + "</span>" 
                            $('.hold').append(list)
                            })
                        })
                    },
                    error:function(xhr,status,error){
                        alert(xhr.status)
                    }
                })
            })
        });

这段代码只需点击一下即可获取整个json，但我想解析它或在点击时加载部分。请使用ajax getJSON或javascript帮助我。我无法做出loadMore的逻辑，我知道我们必须通过一些反击来做到这一点......

Answer 1

试试这个： - http://jsfiddle.net/adiioo7/8erwrha2/

<强> JS： -

<IfModule mod_rewrite.c>
   RewriteEngine on

   RewriteCond %{HTTP_HOST} ^test\.com$
   RewriteRule    ^(.*)$ app/webroot/$1 [NC,L]

  RewriteCond %{HTTP_HOST} ^revamp\.test\.com$
  RewriteCond %{REQUEST_URI} !^/revamp
  RewriteRule    ^(.*)$ revamp/$1 [NC,L]
</IfModule>

<强> HTML： -

var json = [{
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}];

jQuery(function ($) {
    $.each(json, function (i, value) {
        var list = "<li class='hidden' >" + "<img src'" + value.imagepath + "' alt=''/>" + "<span>" + value.heading + "</span>" + "<span>" + value.details + "</span>"
        $('.hold').append(list);
    });

    function loadMore(){
        $(".hold .hidden").slice(0,2).removeClass("hidden");
    }

    loadMore();

    $("#btnLoadMore").on("click",loadMore);        

});

<强> CSS： -

<div class="hold"></div>
<input type="button" id="btnLoadMore" value="Load More"/>

从json获取数据，如使用javascript和jquery加载更多

1 个答案:

试试这个： - http://jsfiddle.net/adiioo7/8erwrha2/