之前我們爬取的網(wǎng)頁(yè)，多是HTML靜態(tài)生成的內(nèi)容，直接從HTML源碼中就能找到看到的數(shù)據(jù)和內(nèi)容，然而并不是所有的網(wǎng)頁(yè)都是這樣的。
有一些網(wǎng)站的內(nèi)容由前端的JS動(dòng)態(tài)生成，由于呈現(xiàn)在網(wǎng)頁(yè)上的內(nèi)容是由JS生成而來，我們能夠在瀏覽器上看得到，但是在HTML源碼中卻發(fā)現(xiàn)不了。比如今日頭條：
瀏覽器呈現(xiàn)的網(wǎng)頁(yè)是這樣的：
查看源碼，卻是這樣的：
網(wǎng)頁(yè)的新聞在HTML源碼中一條都找不到，全是由JS動(dòng)態(tài)生成加載。
遇到這種情況，我們應(yīng)該如何對(duì)網(wǎng)頁(yè)進(jìn)行爬取呢？有兩種方法：
1、從網(wǎng)頁(yè)響應(yīng)中找到JS腳本返回的JSON數(shù)據(jù)；2、使用Selenium對(duì)網(wǎng)頁(yè)進(jìn)行模擬訪問
在此只對(duì)第一種方法作介紹，關(guān)于Selenium的使用，后面有專門的一篇。
一、從網(wǎng)頁(yè)響應(yīng)中找到JS腳本返回的JSON數(shù)據(jù)
即使網(wǎng)頁(yè)內(nèi)容是由JS動(dòng)態(tài)生成加載的，JS也需要對(duì)某個(gè)接口進(jìn)行調(diào)用，并根據(jù)接口返回的JSON數(shù)據(jù)再進(jìn)行加載和渲染。
所以我們可以找到JS調(diào)用的數(shù)據(jù)接口，從數(shù)據(jù)接口中找到網(wǎng)頁(yè)中最后呈現(xiàn)的數(shù)據(jù)。
就以今日頭條為例來演示：
1、從找到JS請(qǐng)求的數(shù)據(jù)接口
F12打開網(wǎng)頁(yè)調(diào)試工具
網(wǎng)頁(yè)調(diào)試工具
選擇“網(wǎng)絡(luò)”選項(xiàng)卡后，發(fā)現(xiàn)有很多響應(yīng)，我們篩選一下，只看XHR響應(yīng)。
（XHR是Ajax中的概念，表示XMLHTTPrequest）
然后我們發(fā)現(xiàn)少了很多鏈接，隨便點(diǎn)開一個(gè)看看：
我們選擇city，預(yù)覽中有一串json數(shù)據(jù)：
我們?cè)冱c(diǎn)開看看：
原來全都是城市的列表，應(yīng)該是加載地區(qū)新聞之用的。
現(xiàn)在大概了解了怎么找JS請(qǐng)求的接口的吧？但是剛剛我們并沒有發(fā)現(xiàn)想要的新聞，再找找看：
有一個(gè)focus，我們點(diǎn)開看看：
與首頁(yè)的圖片新聞呈現(xiàn)的數(shù)據(jù)是一樣的，那么數(shù)據(jù)應(yīng)該就在這里面了。
看看其他的鏈接：
這應(yīng)該是熱搜關(guān)鍵詞
這個(gè)就是圖片新聞下面的新聞了。
我們打開一個(gè)接口鏈接看看:
返回一串亂碼，但從響應(yīng)中查看的是正常的編碼數(shù)據(jù)：
有了對(duì)應(yīng)的數(shù)據(jù)接口，我們就可以仿照之前的方法對(duì)數(shù)據(jù)接口進(jìn)行請(qǐng)求和獲取響應(yīng)了
2、請(qǐng)求和解析數(shù)據(jù)接口數(shù)據(jù)
先上完整代碼：
# coding：utf-8
import requests
import json
url = 'http://www.toutiao.com/api/pc/focus/'
wbdata = requests.get(url).text
data = json.loads(wbdata)
news = data['data']['pc_feed_focus']
for n in news:
title = n['title']
img_url = n['image_url']
url = n['media_url']
print(url,title,img_url)
返回出來的結(jié)果如下：
照例，稍微講解一下代碼：
代碼分為四部分，
第一部分：引入相關(guān)的庫(kù)
# coding：utf-8
import requests
import json
第二部分：對(duì)數(shù)據(jù)接口進(jìn)行http請(qǐng)求
url = 'http://www.toutiao.com/api/pc/focus/'
wbdata = requests.get(url).text
第三部分：對(duì)HTTP響應(yīng)的數(shù)據(jù)JSON化，并索引到新聞數(shù)據(jù)的位置
data = json.loads(wbdata)
news = data['data']['pc_feed_focus']
第四部分：對(duì)索引出來的JSON數(shù)據(jù)進(jìn)行遍歷和提取
for n in news:
title = n['title']
img_url = n['image_url']
url = n['media_url']
print(url,title,img_url)
如此，就完成了從JS網(wǎng)頁(yè)中爬取數(shù)據(jù)。
之前我們爬取的網(wǎng)頁(yè)，多是HTML靜態(tài)生成的內(nèi)容，直接從HTML源碼中就能找到看到的數(shù)據(jù)和內(nèi)容，然而并不是所有的網(wǎng)頁(yè)都是這樣的。
有一些網(wǎng)站的內(nèi)容由前端的JS動(dòng)態(tài)生成，由于呈現(xiàn)在網(wǎng)頁(yè)上的內(nèi)容是由JS生成而來，我們能夠在瀏覽器上看得到，但是在HTML源碼中卻發(fā)現(xiàn)不了。比如今日頭條：
瀏覽器呈現(xiàn)的網(wǎng)頁(yè)是這樣的：
查看源碼，卻是這樣的：
網(wǎng)頁(yè)的新聞在HTML源碼中一條都找不到，全是由JS動(dòng)態(tài)生成加載。
遇到這種情況，我們應(yīng)該如何對(duì)網(wǎng)頁(yè)進(jìn)行爬取呢？有兩種方法：
1、從網(wǎng)頁(yè)響應(yīng)中找到JS腳本返回的JSON數(shù)據(jù)；2、使用Selenium對(duì)網(wǎng)頁(yè)進(jìn)行模擬訪問
在此只對(duì)第一種方法作介紹，關(guān)于Selenium的使用，后面有專門的一篇。
一、從網(wǎng)頁(yè)響應(yīng)中找到JS腳本返回的JSON數(shù)據(jù)
即使網(wǎng)頁(yè)內(nèi)容是由JS動(dòng)態(tài)生成加載的，JS也需要對(duì)某個(gè)接口進(jìn)行調(diào)用，并根據(jù)接口返回的JSON數(shù)據(jù)再進(jìn)行加載和渲染。
所以我們可以找到JS調(diào)用的數(shù)據(jù)接口，從數(shù)據(jù)接口中找到網(wǎng)頁(yè)中最后呈現(xiàn)的數(shù)據(jù)。
就以今日頭條為例來演示：
1、從找到JS請(qǐng)求的數(shù)據(jù)接口
F12打開網(wǎng)頁(yè)調(diào)試工具
網(wǎng)頁(yè)調(diào)試工具
選擇“網(wǎng)絡(luò)”選項(xiàng)卡后，發(fā)現(xiàn)有很多響應(yīng)，我們篩選一下，只看XHR響應(yīng)。
（XHR是Ajax中的概念，表示XMLHTTPrequest）
然后我們發(fā)現(xiàn)少了很多鏈接，隨便點(diǎn)開一個(gè)看看：
我們選擇city，預(yù)覽中有一串json數(shù)據(jù)：
我們?cè)冱c(diǎn)開看看：
原來全都是城市的列表，應(yīng)該是加載地區(qū)新聞之用的。
現(xiàn)在大概了解了怎么找JS請(qǐng)求的接口的吧？但是剛剛我們并沒有發(fā)現(xiàn)想要的新聞，再找找看：
有一個(gè)focus，我們點(diǎn)開看看：
與首頁(yè)的圖片新聞呈現(xiàn)的數(shù)據(jù)是一樣的，那么數(shù)據(jù)應(yīng)該就在這里面了。
看看其他的鏈接：
這應(yīng)該是熱搜關(guān)鍵詞
這個(gè)就是圖片新聞下面的新聞了。
我們打開一個(gè)接口鏈接看看:
返回一串亂碼，但從響應(yīng)中查看的是正常的編碼數(shù)據(jù)：
有了對(duì)應(yīng)的數(shù)據(jù)接口，我們就可以仿照之前的方法對(duì)數(shù)據(jù)接口進(jìn)行請(qǐng)求和獲取響應(yīng)了
2、請(qǐng)求和解析數(shù)據(jù)接口數(shù)據(jù)
先上完整代碼：
# coding：utf-8
import requests
import json
url = 'http://www.toutiao.com/api/pc/focus/'
wbdata = requests.get(url).text
data = json.loads(wbdata)
news = data['data']['pc_feed_focus']
for n in news:
title = n['title']
img_url = n['image_url']
url = n['media_url']
print(url,title,img_url)
返回出來的結(jié)果如下：
照例，稍微講解一下代碼：
代碼分為四部分，
第一部分：引入相關(guān)的庫(kù)
# coding：utf-8
import requests
import json
第二部分：對(duì)數(shù)據(jù)接口進(jìn)行http請(qǐng)求
url = 'http://www.toutiao.com/api/pc/focus/'
wbdata = requests.get(url).text
第三部分：對(duì)HTTP響應(yīng)的數(shù)據(jù)JSON化，并索引到新聞數(shù)據(jù)的位置
data = json.loads(wbdata)
news = data['data']['pc_feed_focus']
第四部分：對(duì)索引出來的JSON數(shù)據(jù)進(jìn)行遍歷和提取
for n in news:
title = n['title']
img_url = n['image_url']
url = n['media_url']
print(url,title,img_url)
如此，就完成了從JS網(wǎng)頁(yè)中爬取數(shù)據(jù)。
聯(lián)系客服
