本人js小白,有一ajax问题请求大神帮忙解决 400 请求报错 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

本人js小白,有一ajax问题请求大神帮忙解决 400 请求报错 

2020-05-30 17:28:04 239 1
本人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)
  • kun坤
    2020-05-30 17:28:12

    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);	   	
    	   		});
    0 0
相关问答

162

回答

惊喜翻倍:免费ECS+免费环境配置~!(ECS免费体验6个月活动3月31日结束)

豆妹 2014-10-29 17:52:21 226162浏览量 回答数 162

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 157701浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 93789浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 147244浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 146045浏览量 回答数 31

23

回答

【云服务器分享】网站访问速度快才是硬道理

dreamdoo 2012-10-15 10:15:02 85370浏览量 回答数 23

249

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 305642浏览量 回答数 249

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80466浏览量 回答数 13

11

回答

【精品问答合集】MongoDB热门问答

李博 bluemind 2019-05-29 16:50:19 121334浏览量 回答数 11

13

回答

【精品问答合集】Java热门问答

李博 bluemind 2019-05-29 16:00:45 125598浏览量 回答数 13
+关注
0
文章
13401
问答
问答排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载