模仿百度新闻列表底部的“加载更多”

前言

  自从上个月来到了学校的信息化中心实习后自由安排的时间越来越少,遂好久没来更新博客了。   昨天在完成一个模仿手机端百度新闻列表底“点击加载更多”的功能时,由于第一次写ajax与后端交互,遇到了几个坑,现在逐一来分享。

详情

  1. 后端提供给我的一个用json传递内容的接口,接口地址类似于http://xxxxxxxxx&category=xx&count=xx,category代表新闻的类型,一共有三种,不同的类型对应的列表不同,而count代表当前的页面上已有的新闻条数。   在与写后端的老师的交流中,得知了老师在新闻列表界面是通过将类型放入url来实现的,一共三种url,于是他的三种新闻的列表地址就是http://xxxxxxxx/getlist/x,最后一个字符(1/2/3)代表类型。于是我想到了一个奇巧淫技,通过BOM获取当前的浏览器的url,然后正则获取url的最后一位,于是解决了分类的问题。    当前页面的新闻的形式是一个无序列表,于是通过DOM获取无序列表里的li元素,得到的是一个数组,该数组的长度就是现在页面上的新闻的条数。
  2. 接下来的坑是ajax,jQuery将ajax封装了一遍,又将用json交互的ajax封装了一遍,即getJSON,感觉查到的手册里关于这一方法讲的并不是很好,于是在博客园中找到了这篇文章Jquery getJSON方法分析(一) - 梅桦 - 博客园,看完以后豁然开朗。   我这次的案例中后端的json格式是这样的, [{"url":"url1","title":"title1","pub_date":"1"},{"url":"url2","title":"title2","pub_date":"2"}] 于是我的核心部分代码如下:
 $.getJSON("http://xxxxxxx/getmorenews?category=" + category + "&count=" + count,            function(news) {  
              if (news == "") { //判断是否有内容  
                  $(".ui-refresh").html('已无更多');//提示没内容  
              } else {  
              $.each(news, function(k, v) {  
                var addHtml = ""; //每个循环都单独来一遍  
                $.each(v, function(kk, vv) {  
                                switch (kk) {  
                                  case "url": addHtml += '<li class="am-g am-list-item-dated"><a href="' + vv +'" class="am-list-item-hd ">';break;  
                                  case "title": addHtml += vv +'</a><span class="am-list-date">';break;  
                                  case "pub_date": addHtml += vv + '</span></li>';break;  
                                }  
                            });  
                $(".am-list").append(addHtml);  
                $(".ui-refresh").html('点击加载更多'); //按钮提示还没结束呢  
              });  
            }//判断部分end  
        });

3.在chrome里调试时,还遇到了一个问题,ajax跨域请求被chrome拦截,在xss钩子遍地都是的网上,禁止ajax跨域确实能大幅提高安全,当然在开发和调试时会带来一些小问题。chrome报错信息如下:

XMLHttpRequest cannot load http://xxxxxxxx/getmorenews?category=2&count=15. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

解决方案也很简单,修改chrome的快捷方式的属性中的目标,假设原来是"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe",在后面添加 --disable-web-security,添加后是"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security,注意空格。然后重启chrome,chrome提醒命令行标记不受支持,安全性会下降就成功了。建议平时不要使用这个快加方式启动chrome,会降低chrome防止xss攻击的能力。

尾声

  唔,你可能已经发现了,我用了amaze ui,一个类似bootstrap的框架。在对bootstrap审美疲劳后,发现了amaze ui,还是挺喜欢它的ui的,等段时间来用amaze ui 做一个hexo的主题。

原文发布于微信公众号 - 我为Net狂(dotNetCrazy)

原文发表时间:2015-10-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王鹤的专栏

Vue.js前后端同构方案之准备篇:代码优化

目前Vue.js的火爆不亚于当初的React,本人对写代码有洁癖,代码也是艺术。此篇是准备篇,工欲善其事,必先利其器。我们先在代码层面进行优化,对我们完成整个技...

4K20
来自专栏机器学习算法与Python学习

为什么越来越多的人学习Python

Python, 是一种面向对象、解释型计算机程序设计语言,由Guido van Rossum于1989年发明,第一个公开发行版发行于1991年。Python...

31850
来自专栏哲学驱动设计

OEA 扩展属性系统 - 主要设计类图

时间有限,简单快速的完成本篇博客……(很多问题在此就不细说清楚了,主要还是记录一下成果。) * 先是整个子系统要完成的需求列表: ? * 然后是对它的分析,以及...

27860
来自专栏程序员的碎碎念

Layer弹层组件

前几天了解到这个不错的弹层插件,样式好看,用起来也方便。喜欢的人看完我的博客也可以看官方网站哦:http://www.layui.com 在这个官方网站里有关于...

44850
来自专栏灯塔大数据

技术 | Python从零开始系列连载(十六)

那什么是模块呢?简单的讲,就是一些包装好的内容,当你要用到一些操作在这个模块中时,你就先要导入它

10520
来自专栏NetCore

复杂而艰辛的重构之路--起步

你有没有试过,当你踏入一个新的公司,看到了几千几万几十万代码的时候,那种崩溃的感觉? 代码多不可怕,怕的是代码的可读性、维护性、扩展性是如此之差,这时候该怎么办...

21990
来自专栏大史住在大前端

一统江湖的大前端(5)editorconfig + eslint——你的代码里藏着你的优雅

各种命名风格,各种冗余代码,各种缩进风格,各种奇葩注释和各种没有注释,眼中有码,心中无码,只有心累两个字,项目的整洁度会受到很多客观因素的影响,为了自己的身心健...

28230
来自专栏微信终端开发团队的专栏

聊聊苹果的Bug - iOS 10 nano_free Crash

背景 iOS 10.0-10.1.1上,新出现了一类堆栈为nano_free字样的crash问题,困扰了我们一段时间,这里主要分享解决这个问题的思路,最后尝试...

65190
来自专栏FreeBuf

深入分析IE地址栏内容泄露漏洞

? 前言 在本文中,我们探讨的对象是IE浏览器,尽管该浏览器略显老态,但是其用户还是很多的,所以不容忽视。我最近对MSRC感到很欣喜,因为他们正在将工作重心移...

255100
来自专栏令仔很忙

Web前端----Javascript模块化

一提到模块化,也许我们首先想到的是做项目的时候进行模块设计,按照功能划分不同的模块,最后通过模块的选择和组合组成最终的产品;那把模块化的思想放到前端页面,js...

22210

扫码关注云+社区

领取腾讯云代金券