许多js高手都解决不了,请这方面大神帮忙看一下,如何修改把调用json文本文件的数据改成调用mysql输出的数据?

qlkj666 2018-01-19 10:55:07
现在想用的是这个js
$(function(){
var counter = 0;
// 每页展示4个
var num = 4;
var pageStart = 0,pageEnd = 0;

// dropload
$('.content').dropload({
scrollArea : window,
domUp : {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',
domUpdate : '<div class="dropload-update">↑释放更新-自定义内容</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
},
domDown : {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多-自定义内容</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>',
domNoData : '<div class="dropload-noData">暂无数据-自定义内容</div>'
},
loadDownFn : function(me){
$.ajax({
type: 'GET',
url: 'json/more.json',//需把这里调用的more.json文本数据文件改成调用result.php输出的mysql数据
dataType: 'json',
success: function(data){
var result = '';
counter++;
pageEnd = num * counter;
pageStart = pageEnd - num;

for(var i = pageStart; i < pageEnd; i++){//这里是输出more.json文件中的文本数据,需要改成输出result.php文件调用mysql后输出的json格式数据
result += '<a class="item opacity" href="'+data.lists[i].link+'">'
+'<img src="'+data.lists[i].pic+'" alt="">'
+'<h3>'+data.lists[i].title+'</h3>'
+'<span class="date">'+data.lists[i].date+'</span>'
+'</a>';
if((i + 1) >= data.lists.length){
// 锁定
me.lock();
// 无数据
me.noData();
break;
}
}
// 为了测试,延迟1秒加载
setTimeout(function(){
$('.lists').append(result);
// 每次数据加载完,必须重置
me.resetload();
},1000);
},
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错,也得重置
me.resetload();
}
});
},
threshold : 50
});
});


附原more.json文件供参考【作废,不要调用这个,要改为调用后面的mysql输出的数据】:
{
"lists":[
{
"title":"Apple 苹果 iPhone 6s Plus (A1699) 16G 玫瑰金色 移动联通电信4G 全网通手机",
"pic":"http://d8.yihaodianimg.com/N05/M03/D4/1E/CgQI0lYEBwWAQIvJAAFyostaOYY12501_80x80.jpg",
"link":"#1",
"date":"2015-12-01"
},
{
"title":"Letv 乐视1S 乐1S 移动联通双4G 双卡双待 16GB 金",
"pic":"http://d9.yihaodianimg.com/N07/M00/6B/E6/CgQIz1ZNQWeALuYuAASH8T5MJzY38001_80x80.jpg",
"link":"#2",
"date":"2015-12-02"
},
{
"title":"Samsung 三星 Galaxy A7(2016) A7100 白色 16G 移动联通电信4G手机 双卡双待",
"pic":"http://d7.yihaodianimg.com/N06/M05/F8/C4/ChEbu1Zw_n6ALMiLAAILdjwAoqw20801_80x80.jpg",
"link":"#14",
"date":"2015-12-14"
},
{
"title":"Haier海尔 M352L 移动/联通2G 翻盖老人机 2.4英寸屏老人手机 长待机老年机金色0MB非合约机官方标配",
"pic":"http://d8.yihaodianimg.com/N05/M0A/82/F7/CgQI01ZYI-KAMMwzAAFW6ZSR3Tg50500_80x80.jpg",
"link":"#15",
"date":"2015-12-15"
}
]
}


原来调用mysql的js文件【作废,供参考】:
$(function(){  
var winH = $(window).height(); //页面可视区域高度
var i = 1; //设置当前页数
$(window).scroll(function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //滚动条top
var aa = (pageH-winH-scrollT)/winH;
if(aa<0.02){
$.getJSON("result.php",{page:i},function(json){
if(json){
var str = "";
$.each(json,function(index,array){
var str = "<div class=\"single_item\"><div class=\"element_head\">";
var str += "<div class=\"date\">"+array['date']+"</div>";
var str += "<div class=\"author\">"+array['author']+"</div>";
var str += "</div><div class=\"content\">"+array['content']+"</div></div>";
$("#container").append(str);
});
i++; //需把这段JS中页码传输到php的移植到最上面一段js代码中
}else{
$(".nodata").show().html("别滚动了,已经到底了。。。");
return false;
}
});
}
});
});


result.php文件【要把这个整合到第一段js代码中调用】:
<?php
require_once("header.php");

$page = intval($_GET['page']); //获取请求的页数
$start = $page*8;

$q3="select * from qiangad2 where adyz='0' order by adtime desc,adid Limit $start,8";//$ags[adgsdp3]
$r3=$obj_db->simplequery($q3);
while ($a3=$obj_db->fetchrow($r3,DB_FETCHMODE_ASSOC)){
$arr[] = array(
'content'=>$a3[adjifen],
'author'=>$a3[adjiage],
'date'=>$a3[adid]
);
}
echo json_encode($arr);//转换为json数据输出
?>


result.php输出json格式数据示例
[{"content":"39","author":"78.00","date":"112"},{"content":"44","author":"132.00","date":"132"},{"content":"180","author":"360.00","date":"138"},{"content":"80","author":"198.00","date":"139"},{"content":"150","author":"300.00","date":"88"},{"content":"5","author":"10.00","date":"90"},{"content":"5","author":"10.00","date":"91"},{"content":"6","author":"12.00","date":"92"}]



也就是想实现发布的这个文章的第一段js代码,能够调用最后一段json格式数据:
……
$.ajax({
type: 'GET',
url: 'result.php',
data: { page:i },
dataType: 'json',
success: function(data){
var result = '';
……

请高手帮忙修改,谢谢!
...全文
581 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
kwdpx 2018-02-04
  • 打赏
  • 举报
回复
$('.content').dropload({ scrollArea : window, domUp : { domClass : 'dropload-up', domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>', domUpdate : '<div class="dropload-update">↑释放更新-自定义内容</div>', domLoad : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>' }, domDown : { domClass : 'dropload-down', domRefresh : '<div class="dropload-refresh">↑上拉加载更多-自定义内容</div>', domLoad : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>', domNoData : '<div class="dropload-noData">暂无数据-自定义内容</div>' },

87,928

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧