爬虫基本功2:前端_前端爬虫

作者：小桥流水78 | 2024-07-26 15:19:57

踩

前端爬虫

一:爬虫重点分析html与js

Html:骨骼

css:衣服,主要的目的是用来做美化的,做数据提取的时候不用考虑css

JavaScript:肌肉,让人能够运动起来,可以动态的控制网页

网页右键->查看网页源代码: 查看服务器返回的最原始的代码

F12->Elements:是js执行完之后展现出来的html

极端的情况:原始的页面什么都没,但是可以通过js与服务器交互,拿回来一堆的数据.

二:浏览器的加载过程

根据html内容构建dom树

加载子资源:css/图片/js

css执行,js执行

三:DOM树

js操作html标签,就是通过dom树来控制的,浏览器返回回来的html,可以通过js改的面目全非,整个html都由js来构建也是可以的,不懂js的话,数据隐藏在什么地方你都无法分析

 <script>
        $(document).ready(function () {
            console.log($("#info")[0].nodeName)
            // console.log($("#info").text())
            // console.log($("#info").html())
            // console.log($(".teacher_info").html())
            // console.log($("#info").children().first().text())
            // console.log($(".name").siblings().first().text())
            $(".name").addClass("bobby")
            console.log($(".name").attr("class"))
            $(".age").attr("data", "30")
            $(".age").remove()
        })
    </script>
//$()是jquery的全局对象
//.text()表示剔除标签,只显示所有的文本内容
1

$(document).ready(function() {
    $("#myform").click(function () {
        $("#myform").submit()  //js是可以操控form表单提交的
    })
})
...
<body>
<form id="myform" action="http://127.0.0.1:8000" method="POST" enctype="multipart/form-data">
    <input type="text" name="name"/>
    <input type="password" name="password">
    <input type="file" name="file">
    <input type="button" value="登录">
</form>
//如果直接在表单中写onclick事件,就知道有相应的js,而通过这样的方式,则增加了分析的难度
1

四:ajax与json

json本质是python的dict,是被所有语言所能识别,跨语言的数据交互的格式

ajax:异步js,局部刷新网页,要分析这里面访问服务器带回来的数据

<script>
        $(document).ready(function () {
            $.ajax({
                url:"http://127.0.0.1:8000",
                success:function (data) {
                    for(let value of data){
                        $("table").append("<tr>\n" +
                            "            <td>"+value.name+"</td>\n" +
                            "            <td>"+value.teacher+"</td>\n" +
                            "            <td><a href=\""+value.url+"\">访问</a></td>\n" +
                            "          </tr>")
                    }
                }
            })
        })
    </script>
1

$(document).ready(function() {
    $.ajax({
        type:"post",
        url:"http://127.0.0.1:8000",
        data: $("#myform").serialize(),
        success:function (data) {
            console.log(data)
        }
    })
})
...
<form id="myform" action="http://127.0.0.1:8000" method="POST" enctype="multipart/form-data">
    <input type="text" name="name"/>
    <input type="password" name="password">
    <input type="file" name="file">
    <input type="button" value="登录">
</form>

1

五:动态网页与静态网页

静态网页:直接有固定的数据,爬虫友好

动态网页:有交互的数据,比如通过ajax请求,动态加载数据

六:Get/Post方法

区别(大体知道下即可):

GET在把参数包含在URL中,POST通过request body传递参数
GET请求在URL中传递的参数有长度限制(比如图片,就传递不了),Post没有
GET请求只能进行url编码,而POST支持多种编码方式

三种content-type

application/x-www-form-urlencoded,提交的数据按照key1=val1&key2=val2的方式进行编码,键值都进行了url转码
multipart/form-data,必须配合Post,上传文件时必须让表单的enctype等于这个值
application/json

总结:可以看到数据可以写死在静态网页里面,可以从js、ajax获取,要能够分析出数据藏在哪儿

加微信1040417074打赏10元，免费送慕课网课程：爬虫工程师从入门到进阶

本文由 mdnice 多平台发布

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/885952