爬虫基本功2:前端

最新推荐文章于 2023-10-24 14:52:16 发布

小朱佩琪1

最新推荐文章于 2023-10-24 14:52:16 发布

阅读量73

点赞数

分类专栏：爬虫文章标签：前端爬虫 javascript

本文链接：https://blog.csdn.net/m0_89856325/article/details/126414183

版权

爬虫专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一:爬虫重点分析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()表示剔除标签,只显示所有的文本内容

$(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,而通过这样的方式,则增加了分析的难度

四: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>

$(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>

五:动态网页与静态网页

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

动态网页:有交互的数据,比如通过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