前言
昨天偶然在自己电脑上翻到一家在长沙的小公司给的笔试题,有个题是关于前端的,当时主要应聘岗位是Java后端开发,所以当时对前端知识不熟悉,只会一点HTML+CSS+JS的基础知识。最近有学习Ajax+JS+Jquery的相关知识,再看这道题,考察的是挺简单的页面渲染,练练手还是不错的,在实现的过程中,还是遇到了很多问题,花了将近一天的时间。
题目要求
编写一个html文件,从data.json文件获取数据,实现如图所示的页面及功能。要求如下:
- 通过ajax异步获取数据,并显示到界面上
- 当点击Action列的删除图标时,将本行记录从界面上删除
- 可以使用流行的开发框架及插件,如jQuery、Bootstrap、VUE等
实现过程
先准备好json数据
{ "test":[ {"id":"1","dsn":"alibaba","pn":"payfor","email":"yang@qq.com"}, {"id":"2","dsn":"tengxun","pn":"QQ","email":"longdaye@qq.com"}, {"id":"3","dsn":"google","pn":"sq","email":"l23@qq.com"} ] }
下载Action项中删除按钮的图标
可以去阿里巴巴矢量图中寻找自己喜欢并且合适的图案样式,应有尽有。
http://www.iconfont.cn/按照题目要求的界面编写HTML
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type"