我有3个文件
- index.php
- js文件
- a.php
我将ajax查询从index.php发送到.php,ajax代码是用js文件编写的请求=>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返回Divs的动态数组。它可能是3,4,5,。。。等等。这个结果出现在ajax成功函数中。我想在index.php上一次显示一个Div。我还想要一个next和previous按钮来显示nextdiv或previousdiv,以及如何在index.php中使用json return Data use。??是否有任何使用此数组的功能可以直接转到index.php,在那里我们根据需要对其进行迭代。请帮帮我。。。!!!
如果我是你,我会查看jquery ui。它有一个非常容易实现的选项卡导航插件,您可以用一些简单的DOM操作($(foo).html(bar)
、$(foo).append(bar)
等)来填充它。
考虑在index.php中有这个标记来加载ajax请求所带来的json数据。
<div id='divCarousal'></div>
<input type='button' id='prev' value='Prev' />
<input type='button' id='next' value='Next' />
最后,使用以下ajax代码,您可以填充您的配偶
$.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/