破障篇-Day20｜动态显影咒：抓取 Ajax 动态渲染网页数据

📖 知识点

1. 什么是 Ajax 动态渲染？

普通网页：打开时数据已写好，page.html 直接有。 动态网页：打开时只有框架，数据通过后台接口异步加载，加载完才渲染到页面。直接抓源码常抓不到数据，要等它渲染。

💡 生活比喻 动态网页像 "冲照片"：打开只是一张白纸，数据像药水慢慢显影，要等一会儿才看清内容。

2. 抓取动态数据的核心思路：等 + 找

# 1. 打开动态页面
page.get("动态网址")
# 2. 等待关键数据元素出现（显影）
page.wait.eles(".news-item", timeout=5)
# 3. 此时数据已渲染，再批量抓取
data_list = page.eles(".news-item")
for item in data_list:
    print(item.text)

关键：先用 wait 等数据元素出现，再抓取，避免抓到空页面。

3. 滚动触发 "加载更多" 动态数据

有些动态页面要滚动到底才加载下一页数据：

# 反复滚动到底，触发加载更多
for _ in range(5):
    page.scroll.to_bottom()
    time.sleep(1)   # 等数据加载
    # 每次滚动后可抓取新增数据

完整示例

from DrissionPage import ChromiumPage
import time

page = ChromiumPage()
page.get("动态数据网址")

# 动态显影咒：等数据渲染出来
page.wait.eles(".data-item", timeout=5)
print("✅ 动态数据已渲染")

# 批量抓取渲染后的数据
items = page.eles(".data-item")
for item in items:
    print(item.text)

⚠️ 易错提醒

1. 抓动态页面，先等再抓，别打开就急着取数据
2. 滚动触发加载后要稍等，数据才渲染出来
3. 实在等不到，检查是否是滚动加载、或数据藏在 iframe 里

⚔️ Kata 实战任务

任务需求：

1. 导入 ChromiumPage 和 time
2. 访问一个动态渲染数据的练习页（如 https://the-internet.herokuapp.com/dynamic_loading/2）
3. 用 page.wait.eles(".finish", timeout=5) 等待动态数据渲染出来
4. 定位渲染出来的数据元素，打印其文字
5. 验证成功抓到动态数据

参考代码

from DrissionPage import ChromiumPage
import time

page = ChromiumPage()
# 访问动态加载数据的练习页
page.get("https://the-internet.herokuapp.com/dynamic_loading/2")
print("🌐 已打开动态加载练习页")

# 点击"Start"按钮触发动态加载
page.ele("button").click()
print("🔘 已点击Start，开始动态加载……")

# 动态显影咒：等待数据元素出现
page.wait.eles(".finish", timeout=5)
print("✅ 动态数据已显影")

# 抓取渲染出来的数据
result = page.ele(".finish")
print("📊 动态加载的数据：", result.text)

运行输出（示意）：

🌐 已打开动态加载练习页
🔘 已点击Start，开始动态加载……
✅ 动态数据已显影
📊 动态加载的数据： Hello World!

🧠 思考题

1. 为什么动态网页直接 page.html 抓不到数据？抓取前最关键的一步是什么？
2. 滚动 "加载更多" 和 "等一个元素出现"，这两种动态场景分别该用哪个方法？