木灵鱼儿
阅读:2048
Ajax壁纸站点(跨域)
以前写静态站点的时候一直想要一个图片的站点,但是又不想弄成个本地的,个人又懒得更新,这次ajax尝试使用api来获取别人分享的图片,为此就有了这个页面。
提供了诸多筛选条件,分类,排序,图片px大小,比例,色系,后续有能力再加上搜索关键词,下一步就是加上图箱,我要想一个好一点的图箱办法,然后支持后续更新升级,长期使用,以前写的有点简陋。
不多说,上图:
功能详解:
无刷新加载图片
跨域
丰富的筛选条件
支持翻页,因为是ajax刷新,目前固定6页的页值,下一页可以无限,只要还有内容就可以一直下一页
响应式结构
后续增加图箱
后续增加指定跳转到某一页
Demo地址:
有兴趣可以一起研究
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
fetch和ajax获取不到头信息的解决办法
今天就遇到一个问题,后端从头信息给我携带了数据,我需要在请求头中获取,但是不管怎么get,返回的永远是null,但是f12去看响应头,那个数据就在那,亮瞎了眼。一个大大的问号?why???谷歌查了下原因,大概就两种:安全限制,不允许客户端获取部分头信息跨域了,对于跨域请求,客户端允许获取的response header字段只限于“simple response header”和“Access-Control-Expose-Headers” ,在“Access-Control-Allow-Headers”中加了无效说到底,还是后端的设置,如果是nigix可以参考下面的代码:以token头信...
axios 速读
快速了解axios常用功能,适用于对axios有一定使用经验的人。常用请求方法的参数axios.get(url, config);get方法支持两个参数,第一个是url,第二个是{}键值对配置对象。axios.post(url, data, config);post方法支持三个参数:请求地址,上传的数据{},{}键值对配置对象。当然还有一些其他请求类型,可以查看官方文档,这两种常用。除了.xxx方法使用协议,还可以直接传入配置对象的形式使用。axios({ method:'get', url:'xxxx', })这种方式比较适合封装使用。适用度广泛一些。一些常用的config配置...

vue cli3-cli4 本地反代解决本地调试线上api跨域问题 proxy
跨域一直是很烦人问题,不过好现在现在跨域,大部分都是肛后端,后端设置CORS信息即可。但是也有少部分,可能前端能完成的事前端搞定就行了,懒得麻烦后端,这种情况一般都是进行反代。使用场景后端提供了一个在线api地址,但是该地址段和本地localhost不在同一域名下,所以产生了跨域。配置反代 proxy这种情况,我们的vue-cli提供了一个很好的功能,反代。首先我们需要找到vue cli的配置文件:vue.config.js,他存在项目的根目录,和package.json同级,如果没有,手动创建即可,只是一个js文件而已。打开文件填入以下信息:vue.config.jsmodule.ex...
快递信息查询 ajax+api
依旧采用ajax配合阿里云api来获取快递信息,支持自动判断快递公司,初次对接,json部分筛选好做,就是整体的事件判断太麻烦了,快递100的网页还可以通过快递单号先做一个本地预判,这个主要他有大数据分析,有数据库支持,我这边没这个基础,不然也能做,他无非就是分析多少位,开头什么数字,结束什么数字,开头是什么字母,为此我尝试的为顺丰加了一个单独预判,就是单号开始输入sf,大小写都能识别为顺丰。瞬间被用完100次免费查询额度,我还没体验几次呢,无奈续费了下api不多说,上图:demo地址查看功能介绍[x] 采用html5+css3构建[x] 使用jq v3.4.1[x] 响应式结构支持32...

JQ jsonp大揭秘(跨域真理)
如果要在jq里进行跨域,一般来说只有使用jsonp,另一种方式则是进行中间层欺骗,也就是所谓的反代。这里我们主要讲讲json是怎么回事基本json实现jsonp全部都是使用带有src标签的元素,一般默认使用script元素,在src链接地址中,在地址后面加上?name=value&callbakc=hd;其中name=value是传值,而callbakc=hd则是回调,在本地js全局作用域下创建一个名为hd的函数。var script = document.createElement("script"); script.src = "xxxx?callbac...

键盘测试触发页面 更新v1.1
看了一些jq,一时技痒就做了一个,说实话,纸上得来终觉浅,得知此事要躬行,这句话一点都没错,看书的时候我觉得我啥都知道了,用起来,变通的感觉就差很多了,很多东西看上去简单,组合搭配起来还是要花些心思的,不多说,上图。2019-9-3 更新至v1.1[X] 修复三个交互逻辑错误[X] 对特殊按钮离开页面时增加重置操作[X] 优化重置按钮事件在线地址:https://key.mulingyuer.com/

Ajax
异步监听readyState == 3当readyState的值等于3时,此时服务器正在与浏览器传输数据,这个时候其实是可以进行获取到responseText值得,但是这个值并不完整,只有当readyState == 4时,值才是完整的。但是如果我们需要获取的内容是极其长的字符,那么就可以通过监听这个状态,然后轮询的方式,可以在内容没有全部下载来之前就可以提前更新内容了,这样就可以避免在下载的过程中产生的等待时间。var req = new XMLHttpRequest(); var getLastInterval =null, lastLength = 0; req.open(...