本人js小白，有一ajax问题请求大神帮忙解决 400 请求报错
本人js小白，有一ajax问题请求大神帮忙解决
本人是JS小白，希望大神们帮帮忙实现以下效果（js下拉加载更多内容），万分感谢。
本人想通过AJAX加载下页 id="masonry" 的HTML内容到当页（第一页），现在本人写的js是把下页全部的html内容都加载到第一页的 id="masonry" 里面，麻烦大神帮忙修改下js部分
/***JS核心jq ajax部分***/
$.post("./forum.php",
{
mod:"forumdisplay",
fid:fid,
mobile:"2",
page:page,
picajax:"pic"
},
function(data,textStatus){
$("#masonry").append(data);
});
/***HTML部分***/
第一页，第二页，第N页的HTML代码都是以下格式，只是内容图片不一样而已
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Cache-control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>测试 - 手机版</title>
<link rel="stylesheet" href="测试 - 手机版_files/vdk.css" type="text/css" media="all">
<link rel="stylesheet" href="测试 - 手机版_files/dropload.min.css" type="text/css" media="all">
<link rel="stylesheet" href="测试 - 手机版_files/font.min.css" type="text/css" media="all">
<script src="测试 - 手机版_files/jquery.min.js"></script>
</head>
<div class="outer">
<!-- 页面顶部 S -->
<div class="s_dbdh">
<div class="right">
<a href="http://localhost:8080/forum.php?mod=misc&action=nav&mobile=2" class="a"><i class="fa fa-pencil-square-o fa-2x "></i></a>
<a href="http://localhost:8080/search.php?mod=forum&mobile=2"><i class="fa fa-search fa-2x "></i></a>
<a href="http://localhost:8080/home.php?mod=space&do=profile&mycenter=1&mobile=2"><i class="fa fa-user fa-2x "></i></a>
</div>
<div class="s_logo">
<a href="http://localhost:8080/forum.php"><img src="测试 - 手机版_files/s_logo.png"></a>
</div>
</div>
<!-- 页面顶部 E -->
<!-- 主题分类 S -->
<ul class="nav">
<li class="active"><a href="http://localhost:8080/forum.php?mod=forumdisplay&fid=2">最新</a></li>
<li><a href="http://localhost:8080/forum.php?mod=forumdisplay&fid=2&filter=typeid&typeid=1">美女</a></li>
<li><a href="http://localhost:8080/forum.php?mod=forumdisplay&fid=2&filter=typeid&typeid=2">动漫</a></li>
</ul>
<!-- 主题分类 E -->
<!-- 帖子列表 S -->
<div class="inner">
<div class="threadlist">
<ul id="masonry">
<li>
<a href="http://localhost:8080/forum.php?mod=viewthread&tid=106&extra=page%3D1" class="m-life">
<div class="m-life-tit">个人网站，建好网站后的第一</div>
<div class="m-life-des">以及如何为网站取名
不管是公司网站，还是个人网站，建好网站后的第一件事多半是给网站取名;只要你不是准备做纯粹的垃圾站，那么给网站取个好名字都应该是必须要做的;取个 ...</div>
<div class="m-life-pic">
<div class="m-life-pic-item-wrap">
<div class="m-life-pic-item">
<img src="测试 - 手机版_files/forum.html" alt="" class="lazy_img" style="height: 75px; width: auto;">
</div>
</div>
<div class="m-life-pic-item-wrap">
<div class="m-life-pic-item">
<img src="测试 - 手机版_files/forum_1.html" alt="" class="lazy_img" style="height: 75px; width: auto;">
</div>
</div>
<div class="m-life-pic-item-wrap">
<div class="m-life-pic-item">
<img src="测试 - 手机版_files/forum_2.html" alt="" class="lazy_img" style="height: 75px; width: auto;">
</div>
</div>
</div>
<div class="m-list-item-tf">
<i class="name">xf</i>
<i class="time">3 天前</i>
<i class="read">3</i>
<i class="reply">0</i>
</div>
</a>
</li>
<li>
<a href="http://localhost:8080/forum.php?mod=viewthread&tid=75&extra=page%3D1" class="m-life">
<div class="m-life-tit">旗舰店铺的打造，龙头地位如何确立？</div>
<div class="m-life-des">旗舰店铺的打造，龙头地位的确立
旗舰店铺不仅仅是品牌的形象与实力的展示，更是品牌在当地的行业典范。目前，很多区域的旗舰店没有规划，只要面积大于300m2，或者 ...</div>
<div class="m-life-pic">
<div class="m-life-pic-item-wrap">
<div class="m-life-pic-item">
<img src="测试 - 手机版_files/forum_3.html" alt="" class="lazy_img" style="height: 75px; width: auto;">
</div>
</div>
<div class="m-life-pic-item-wrap">
<div class="m-life-pic-item">
<img src="测试 - 手机版_files/forum_4.html" alt="" class="lazy_img" style="height: 75px; width: auto;">
</div>
</div>
<div class="m-life-pic-item-wrap">
<div class="m-life-pic-item">
<img src="测试 - 手机版_files/forum_5.html" alt="" class="lazy_img" style="height: 75px; width: auto;">
</div>
</div>
</div>
<div class="m-list-item-tf">
<i class="name">xf</i>
<i class="time">2015-10-5</i>
<i class="read">9</i>
<i class="reply">1</i>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 帖子列表 E -->
</div>
<script>
var page=$_G['page'];
var fid=$_G['fid'];
var allpage={echo ceil($_G['forum_threadcount'] / $_G['tpp']);};
$(document).ready(function(){
$(window).bind("scroll",function(){
// 判断窗口的滚动条是否接近页面底部
if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
if (allpage>page){
page++;
$.post("./forum.php",
{
mod:"forumdisplay",
fid:fid,
mobile:"2",
page:page,
picajax:"pic"
},
function(result,textStatus){
$("#masonry").append(result);
$("#masonry").imagesLoaded(function(){
var container = document.querySelector('#masonry');
var msnry = new Masonry( container );
container.appendChild( result );
msnry.appended( result );
msnry.layout();
});
});
if (page>=allpage){
$("#loca2").hide();
$("#loca3").show();
setTimeout(function(){$("#loca3").hide()}, 2000);
}
}else{
$("#loca3").show();
setTimeout(function(){$("#loca3").hide()}, 2000);
}
}
});
});
</script>
</body>
</html>
展开
收起
1
条回答
写回答
写回答
-
http://www.css88.com/jqapi-1.9/load/
看看jQuery的load方法，应该满足你的需求。 ###### 检测页面滚动事件，当页面到达最底部时，显示“loading下一页”的box，然后再ajax请求你的内容，填充到box的前面。
具体的js不可能帮你写好，不然你就只copy了。 ######$.post("./forum.php", { mod:"forumdisplay", fid:fid, mobile:"2", page:page, picajax:"pic" }, function(result,textStatus){ var content = $( result ).find( '#masonry' ); // 为了测试，延迟1秒加载 setTimeout(function(){ $('#masonry').append( content ); me.resetload(); },1000); });2020-05-30 17:28:12赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
