一, 不得不去学习的一个东西: ajax
虽然说现在 vue 等框架都出来了, 但是还是有很多公司没有选择, 还是在利用传统的方法去做数据交互等方面. 对于我来说, 虽然说做前端的年限在这, 但是对于前后端分离来说, 还是一个新手, 说到这里, 相比有些人就应该知道, 我的多年前端经验就是已切图为主要工作, 其实对于我, 早期以为的前端就是这样, 针对浏览器兼容性, ie6--- 一直到后来的各种各样的浏览器, 反正大多数都是以这方面去进行的.
但是呢? 这次下来去面试, 多数都是被否, 一切聊的都挺好, 一到前后端数据方面, 就满脸懵啦, 虽然有学过, 但是毕竟没有一个实践的经验, 而且最开始的时候, 碰到一家公司, 那个技术经理的那种笑容, 可以说是深深的能印在我的脑海与心里, 回来就听了比昂的海阔天空, 里面有一句 叫:'多少次迎着冷眼与嘲笑', 现在想想, 真的是可以体会那种感觉了. 当然, 我也理解, 毕竟在有这方面经验的人眼里, 一个 28 岁的人, 有着多年的前端经验, 但是连前后端分离的基本知识都不清晰. 所以只能把这些化成动力, 让自己更加的努力学习. 随时告诉自己, 年龄不是问题. 一步步慢慢来.
下面我就分享一下我后来去尝试的 ajax 的获取数据渲染页面与本地缓存.
希望看到这篇文章的前辈与大神, 可以把这个初级方面的代码给与指点, 与更深的建议.
- <script>
- $.ajax({
- url:'https://www.easy-mock.com/mock/5af292f7ba54552178d987db/ycwr1/index',
- method:'get',
- dataType:'json',
- success:function (data) {
- if(window.localStorage){
- localStorage.setItem('data',JSON.stringify(data));
- }else {
- console.log('不支持 localStorage')
- }
- person = JSON.parse(localStorage.getItem('data'));
- let dataIndex = person.data;
- console.log(dataIndex);
- creathtml(dataIndex.classified);
- function creatHtml(data) {
- let indexproList = document.querySelector('.indexproList');
- for(let i =0;i<data.length;i++){
- let li = document.createElement('li');
- li.innerHTML = `
- <a href="#">
- <div class="i-pro-ico"><img src="${data[i].ico}" alt=""width="200"height="140"></div>
- <p class="i-pro-tit">${data[i].title}</p>
- </a>
- `;
- indexproList.appendChild(li);
- }
- }
- },
- error:function () {
- console.log('失败')
- }
- })
- </script>
以上代码就是之后自己去研究出来的一套自认为可行的一套 ajax. 发上来也是希望可以帮忙看下. 留言指点, 在此先谢过可以留言指点的朋友. 谢谢.
来源: http://www.qdfuns.com/article/22692/6c9e3f237dfdd2c5e14ee92b067c51bd.html