Question

我有3个文件

的index.php
js file
a.php只会

我从index.php向a.php发送ajax查询，ajax代码用js文件写入请求=＆gt; index.php->js->a.php

Ajax代码如下：

$.ajax({    
        type    : "POST",
        cache   : true,
        dataType: "json",
        url     : "a.php",
        //async:false,
        data    : {
                    proid:id
                  },                
        success: function(data) {

            //console.log(data);
            var a = data.length;




        }
    });

a.php返回Div的动态数组。它可能是3,4,5 ......所以...开启。这个结果来自ajax成功函数。我想一次一个地在index.php上显示Div。我还想要一个下一个和上一个按钮来显示下一个div或前一个div以及如何使用json返回数据在index.php中使用。是否有任何功能可以直接使用这个数组转到index.php，我们按照我们的要求迭代它。请帮我...！！！

Answer 1

如果我是你，我会查看jquery ui。它有一个非常易于实现的tabbed navigation插件，您可以使用一些简单的DOM操作（$(foo).html(bar)，$(foo).append(bar)等）来填充。

Answer 2

考虑在index.php中有这个标记来加载你的ajax请求所带来的json数据。

<div id='divCarousal'></div>
<input type='button' id='prev' value='Prev' />
<input type='button' id='next' value='Next' />

最后使用以下ajax代码，您可以填充您的carousal div。

$.ajax({    
        type    : "POST",
        cache   : true,
        dataType: "json",
        url     : "a.php",
        success: function(data) {
            //Below is the dummy data 
            var data = [ 
                {"div": '<div>1</div>'}, 
                {"div": '<div>2</div>'}, 
                {"div": '<div>3</div>'}
            ];
            $.each (data, function () {
                $('#divCarousal').append(this.div);
            });

            $('#divCarousal').children('div:not(:first)').hide();

            $('#next').click(function () {
                $('div#divCarousal > div:visible').hide().next().show();
                if ($('div#divCarousal > div:visible').next().length == 0) {
                    $(this).attr('disabled', true);
                } else {
                    $('#prev').attr('disabled', false);
                }
            });

             $('#prev').click(function () {
                $('div#divCarousal > div:visible').hide().prev().show();
                if ($('div#divCarousal > div:visible').prev().length == 0) {
                    $(this).attr('disabled', true);
                }  else {
                    $('#next').attr('disabled', false);
                }  
            });
        }
    });

演示：http://jsfiddle.net/ufDtm/

通过JavaScript进行客户端分页

2 个答案: