一道前端面试题：躲猫猫

最新推荐文章于 2024-10-20 22:58:27 发布

竹林里的小猪

最新推荐文章于 2024-10-20 22:58:27 发布

阅读量877

点赞数

分类专栏： JQuery 文章标签： ajax javascript 面试题前端编码

本文链接：https://blog.csdn.net/llittlepig/article/details/36202607

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

来公司面试的时候，遇到一个这样的题目：

鼠标划过下面那行的时候显示：亲~ 躲猫猫开始咯，先用css技能哦！题目要求找出页面隐藏的信息，利用信息中的邮箱给面试官发一封邮件。

看到题的时候确实是不知道从哪下手，进公司以后leader给安排的任务一直与之相关，难怪要出这种题了。今天的任务之一是把这道题做出来，并将找到的信息单独在一个页面上显示出来，虽然做出来了，不过不太清楚是否我所用的方法是靠谱的，若有错误，望指正！

首先打开浏览器调试窗，打开页面js文件，

若是只要找到邮箱的话，上述已经可以达到效果，即在console中直接运行原页面中的ajax函数就可以了，得到上图中的url，然后直接可以访问数据。

jQuery17208457360160179241_1404196258347({
    "users":[{
        "id":"001",
        "name":"解码前",
        "age":"28",
        "nickname":"解码前",
        "position":"解码前",
        "email":"admin@163.com"
    }]
});

若是要所有的数据，那么还需要额外的处理，因为取到的数据经过jquery的编码，需要解码后才能正常显示。找到了请求数据的URL，然后用简单的ajax的封装函数$.get()函数进行获取信息，最终如下代码所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    #userInfo{width:500px;margin:0 auto;}
    .infos{font-size: 16px;font-family: "微软雅黑";line-height: 30px;}
</style>
<script src="js/jquery-1.11.1.js" type="text/javascript" ></script>
</head>

<body>
    <div id="userInfo">
        <h2>信息</h2>
        <div class="infos"></div>
        <div class="infos2">
            
        </div>
    </div>
<script>
$.ajax({
    url:"http://mining.com.cn/index",
    dataType:"jsonp",
    jsonp:"callback",
    type:"get",
    success:function(a){
        var users = a.users[0];
        $(".infos").html("<span style='color:#f00;'>id:</span>"+ decodeURIComponent(users.id)+"<br/>"+"<span style='color:#f00;'>name:</span>"+decodeURIComponent(users.name)+"<br/>"+"<span style='color:#f00;'>age:</span>"+decodeURIComponent(users.age)+"<br/>"+"<span style='color:#f00;'>nickname:</span>"+decodeURIComponent(users.nickname)+"<br/>"+"<span style='color:#f00;'>position:</span>"+decodeURIComponent(users.position)+"<br/>"+"<span style='color:#f00;'>email:</span>"+decodeURIComponent(users.email)+"<br/>");
        $(".infos2")
    }
})
</script>
</body>
</html>