ajax動態載入怎麼爬??

更新於 發佈於 閱讀時間約 15 分鐘

如題最近在爬一個網站

發現裡面我要的一個地方

raw-image

就是一個棒球網站裡面的攝影機按鈕(影片網址)

我想取得所有影片網址然後把影片抓下來

如果直接把網址跟XPATH丟給CHATGPT寫爬蟲

結果就是他定位不到

後來檢查原因原來是

raw-image

那個攝影機是包在一個ajaxTable裡面

所以做法變成要先確認這個ajaxTable有載入否則根本定位不到

解法就是要先點擊球員名字

raw-image

之後拉到底讓整個table載入

raw-image

之後才有辦法定位到右邊那排攝影機

貼上我跟chatgpt互動的情況

raw-image
raw-image
raw-image

ChatGPT 說:

  • 這段程式是用 Selenium 模擬瀏覽器,適合動態載入或需要點擊互動的頁面。
  • id_676979 是你指定的元素ID,你可以換成其他ID或用其他定位方式。
  • 如果需要擷取點擊後展開的特定資料,可能要用更精準的方式找到該資料元素並抓取內容。
  • 如果你想要爬大量資料,記得遵守網站的 robots.txt 和使用規範,避免被封鎖。

如果你有想要我幫你擷取點開後的具體數據,也可以提供更詳細的需求,我幫你客製化。

我說:

點開之後尋找到所有類似 //*[@id="ajaxTable_676979"]這個東西 應該是動態載入的 所以點開之後還要拉到最下面才會出現

ChatGPT 說:

了解,你的需求是: 用 Selenium 打開頁面 點擊 id="id_676979" 這個元素展開動態內容 展開後頁面會透過 Ajax 載入動態表格(例如 id="ajaxTable_676979") 且動態表格是分頁或滾動加載的,需要滾動到最下面讓資料全部載入

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import time

def scroll_to_bottom(driver, pause_time=2, max_scrolls=20):
"""滾動到頁面最底部,等待 Ajax 載入"""
last_height = driver.execute_script("return document.body.scrollHeight")
scrolls = 0
while scrolls < max_scrolls:
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
time.sleep(pause_time)
new_height = driver.execute_script("return document.body.scrollHeight")
if new_height == last_height:
# 沒有新高度,可能已經到底
break
last_height = new_height
scrolls += 1

# 主程式
driver_path = 'chromedriver' # 改成你的路徑
options = webdriver.ChromeOptions()
# options.add_argument('--headless') # 有需要可開啟無頭模式
driver = webdriver.Chrome(executable_path=driver_path, options=options)

try:
url = 'https://baseballsavant.mlb.com/statcast_search?hfPT=&hfAB=&hfGT=R%7C&hfPR=&hfZ=&hfStadium=&hfBBL=&hfNewZones=&hfPull=&hfC=&hfSea=2025%7C&hfSit=&player_type=pitcher&hfOuts=&hfOpponent=&pitcher_throws=&batter_stands=&hfSA=&game_date_gt=&game_date_lt=&hfMo=&hfTeam=&home_road=&hfRO=&position=&hfInfield=&hfOutfield=&hfInn=&hfBBT=&hfFlag=&metric_1=&group_by=name&min_pitches=0&min_results=0&min_pas=0&sort_col=pitches&player_event_sort=api_p_release_speed&sort_order=desc#results'
driver.get(url)

wait = WebDriverWait(driver, 15)
# 等待 id_676979 可點擊
target = wait.until(EC.element_to_be_clickable((By.ID, 'id_676979')))
target.click()

time.sleep(3) # 等 ajax 開始載入

# 滾動到底部讓所有資料載入
scroll_to_bottom(driver, pause_time=3, max_scrolls=30)

# 等待 ajaxTable_676979 出現
ajax_table = wait.until(EC.presence_of_element_located((By.ID, 'ajaxTable_676979')))

# 抓取該表格的HTML
table_html = ajax_table.get_attribute('outerHTML')
print(table_html)

finally:
driver.quit()


ChatGPT 說:

程式流程說明 用 Selenium 開啟網址 等待「id_676979」按鈕可點擊並點擊 等待一段時間讓 Ajax 觸發載入 執行 scroll_to_bottom 函式,模擬瀏覽器往下滾動多次,讓懶加載資料被全部載入 等待動態載入的表格「ajaxTable_676979」出現 抓取該表格的 HTML 內容 如果你想要解析表格裡的資料,可以接著用 BeautifulSoup 處理 table_html,或者直接用 Selenium 找表格裡的 <tr>、<td> 等元素。 如果你需要我幫你寫解析表格欄位的程式,或批量點開多個 id 來抓資料,也可以告訴我!

你說:

ajaxtable載入後 尋找//*[@id="ajaxTable_676979"]/tbody/tr[1]/td[15]/a 注意這裡的tr[1]可變也有tr[2]依此類推 都要找到

ChatGPT 說:

了解!你的需求是在動態載入的表格 id="ajaxTable_676979" 裡,遍歷所有的 <tr> 列,然後從每一列的第15個 <td> 找 <a> 標籤,將所有這些 <a> 標籤元素找出來。 以下示範用 Selenium 來做這件事:


from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import time

def scroll_to_bottom(driver, pause_time=2, max_scrolls=20):
last_height = driver.execute_script("return document.body.scrollHeight")
scrolls = 0
while scrolls < max_scrolls:
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
time.sleep(pause_time)
new_height = driver.execute_script("return document.body.scrollHeight")
if new_height == last_height:
break
last_height = new_height
scrolls += 1

driver_path = 'chromedriver'
options = webdriver.ChromeOptions()
# options.add_argument('--headless')
driver = webdriver.Chrome(executable_path=driver_path, options=options)

try:
url = 'https://baseballsavant.mlb.com/statcast_search?hfPT=&hfAB=&hfGT=R%7C&hfPR=&hfZ=&hfStadium=&hfBBL=&hfNewZones=&hfPull=&hfC=&hfSea=2025%7C&hfSit=&player_type=pitcher&hfOuts=&hfOpponent=&pitcher_throws=&batter_stands=&hfSA=&game_date_gt=&game_date_lt=&hfMo=&hfTeam=&home_road=&hfRO=&position=&hfInfield=&hfOutfield=&hfInn=&hfBBT=&hfFlag=&metric_1=&group_by=name&min_pitches=0&min_results=0&min_pas=0&sort_col=pitches&player_event_sort=api_p_release_speed&sort_order=desc#results'
driver.get(url)

wait = WebDriverWait(driver, 15)
target = wait.until(EC.element_to_be_clickable((By.ID, 'id_676979')))
target.click()

time.sleep(3)
scroll_to_bottom(driver, pause_time=3, max_scrolls=30)

ajax_table = wait.until(EC.presence_of_element_located((By.ID, 'ajaxTable_676979')))

# 取得 tbody 裡所有 tr
rows = ajax_table.find_elements(By.XPATH, ".//tbody/tr")
print(f"共找到 {len(rows)} 列")

all_links = []
for i, row in enumerate(rows, 1):
try:
# 找每列第15個td裡的a標籤
link = row.find_element(By.XPATH, "./td[15]/a")
href = link.get_attribute('href')
text = link.text
print(f"Row {i} - Link text: {text}, href: {href}")
all_links.append((text, href))
except Exception as e:
print(f"Row {i} - 找不到第15欄<a>標籤或發生錯誤: {e}")

finally:
driver.quit()

重點說明:

  • ajax_table.find_elements(By.XPATH, ".//tbody/tr") 找所有資料列(tr
  • 每一列用相對 XPath ./td[15]/a 找第15個欄位的 <a>
  • 用 try-except 避免某些列沒有第15欄 <a> 導致錯誤
  • 印出文字和連結,並存在 all_links 裡方便後續處理

你可以改成自己需要的資料儲存或其他後續操作。如果資料很多或有分頁,你也可以做迴圈去點下一頁再抓。

如果想要我幫你做分頁自動翻頁也可以告訴我。

結果

raw-image

大功告成

所以爬蟲絕對不是把網址跟XPATH丟給CHATGPT他就能幫你寫的

像這種動態載入的情況 要像剝洋蔥一樣 要先定位到外層 點擊後展開內層

才有辦法繼續往內剝

使用者必須先自己在網站上跟所要爬的元素做互動 觀察

看看該元素包在那些結構底下

這些結構是否是動態載入的

若是動態載入則要用selenium

模擬使用者操作才能取得

留言
avatar-img
留言分享你的想法!
Isaac Liu-avatar-img
2025/06/02
我一直覺得selenium的‘等待元素’是個不該存在的課題,也因此我改用了playwright,它能夠等待http response是否完成,經過包裝,我的腳本再也不需要寫任何隱式或顯示的元素等待,但卻得到了更好的腳本穩定度。期待有一天selenium也能進行這樣的核心優化,自動化測試不該把等待這件事情交由使用者透過這樣非直接的方式來控制等待,什麼時候網頁把ajax載入完成,瀏覽器明明很清楚能掌握,不該從HTML DOM去判斷。
avatar-img
于正龍(Ricky)的沙龍
37會員
57內容數
人工智能工作經驗跟研究
2025/05/11
當你使用 MongoDB 時,通常需要先啟動 MongoDB 的伺服器(mongod),然後再透過 MongoDB Shell(mongosh.exe)連線操作資料庫。以下是完整的啟動步驟與指令: ✅ 1. 啟動 MongoDB 伺服器(mongod) mongod --dbpath "C:\你
2025/05/11
當你使用 MongoDB 時,通常需要先啟動 MongoDB 的伺服器(mongod),然後再透過 MongoDB Shell(mongosh.exe)連線操作資料庫。以下是完整的啟動步驟與指令: ✅ 1. 啟動 MongoDB 伺服器(mongod) mongod --dbpath "C:\你
2025/05/10
🚀 騷操作清單(進階黑魔法級) 1. 自定義 route 裝飾器,讓路由語法更優雅 python 複製編輯# 超騷:讓 route 看起來像函式呼叫 def route(path, **options): def decorator(f): app.add_url_ru
2025/05/10
🚀 騷操作清單(進階黑魔法級) 1. 自定義 route 裝飾器,讓路由語法更優雅 python 複製編輯# 超騷:讓 route 看起來像函式呼叫 def route(path, **options): def decorator(f): app.add_url_ru
2024/12/25
這篇文章主要會介紹怎麼開始使用python Django framework 建立一個網站 安裝 anaconda 創建虛擬開發環境 cmd 輸入 conda create -n <自定義虛擬環境名稱> python=3.5 進入虛擬環境 conda activate <自定義虛擬環境名稱>
Thumbnail
2024/12/25
這篇文章主要會介紹怎麼開始使用python Django framework 建立一個網站 安裝 anaconda 創建虛擬開發環境 cmd 輸入 conda create -n <自定義虛擬環境名稱> python=3.5 進入虛擬環境 conda activate <自定義虛擬環境名稱>
Thumbnail
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
#maxask #惡意軟體 #瀏覽器被惡意或廣告工具綁架 URL轉址(重定向、重新導向):當使用者瀏覽A網址時,自動跳轉到B網址。 - 發生情境: 使用edge瀏覽器,使用Google搜尋引擎, 搜尋XXX關鍵字,網頁自動跳轉到maxask的搜尋介面。
Thumbnail
#maxask #惡意軟體 #瀏覽器被惡意或廣告工具綁架 URL轉址(重定向、重新導向):當使用者瀏覽A網址時,自動跳轉到B網址。 - 發生情境: 使用edge瀏覽器,使用Google搜尋引擎, 搜尋XXX關鍵字,網頁自動跳轉到maxask的搜尋介面。
Thumbnail
長期用 Google Pixel 的鐵粉們,肯定最不陌生又驕傲,當然是以往的那個無限相簿空間。 讓大家從此不用再煩惱,一直都是無腦狂按拍攝鈕,拍那麼多東西該刪什麼好? 這蠻偷雞的技巧,就是可以讓你把剛無腦猛拍的各種影像,全部都讓它同步上傳雲端網路空間,達到不再煩惱空間不足的問題。
Thumbnail
長期用 Google Pixel 的鐵粉們,肯定最不陌生又驕傲,當然是以往的那個無限相簿空間。 讓大家從此不用再煩惱,一直都是無腦狂按拍攝鈕,拍那麼多東西該刪什麼好? 這蠻偷雞的技巧,就是可以讓你把剛無腦猛拍的各種影像,全部都讓它同步上傳雲端網路空間,達到不再煩惱空間不足的問題。
Thumbnail
因為最近有在經營Youtube,也有看了一些教學,以及有些經營小心得
Thumbnail
因為最近有在經營Youtube,也有看了一些教學,以及有些經營小心得
Thumbnail
你最近有特別有興趣的產業嗎,有興趣的股票嗎?你是每天去刷網頁嗎? 這裡有個方法可以幫你收集相關的網路新聞,固定送到你的信箱。 這個方法就是Google帳號的功能,快訊。 一、        首先你要有一個Google account及Gmail 然後是login in的狀態! 二、     
Thumbnail
你最近有特別有興趣的產業嗎,有興趣的股票嗎?你是每天去刷網頁嗎? 這裡有個方法可以幫你收集相關的網路新聞,固定送到你的信箱。 這個方法就是Google帳號的功能,快訊。 一、        首先你要有一個Google account及Gmail 然後是login in的狀態! 二、     
Thumbnail
大多數人瀏覽 Youtube 影片,都曾想將影片下載下來。不管是爲了離綫觀看,還是爲了自己備課,作業ppt,或者做工作簡報等。所以選擇一個靠譜的YouTube下載工具很關鍵。
Thumbnail
大多數人瀏覽 Youtube 影片,都曾想將影片下載下來。不管是爲了離綫觀看,還是爲了自己備課,作業ppt,或者做工作簡報等。所以選擇一個靠譜的YouTube下載工具很關鍵。
Thumbnail
資訊架構就像是網站的地圖,讓用戶快速找到所需的資訊。好的資訊架構可提升使用者滿意度、強化 SEO、增進擴充性、達成商業目標。資訊架構可透過使用者訪談、卡片分析、競品分析、使用者測試等方法設計。在設計資訊架構時,需考量用戶的認知方式、目標客群、資訊分類等因素。定期檢驗資訊架構,才能確保用戶體驗。
Thumbnail
資訊架構就像是網站的地圖,讓用戶快速找到所需的資訊。好的資訊架構可提升使用者滿意度、強化 SEO、增進擴充性、達成商業目標。資訊架構可透過使用者訪談、卡片分析、競品分析、使用者測試等方法設計。在設計資訊架構時,需考量用戶的認知方式、目標客群、資訊分類等因素。定期檢驗資訊架構,才能確保用戶體驗。
Thumbnail
近期 Google 搜尋引擎API機密文件的外流事件,絕對是近期震撼數位行銷世界的一大頭條,其內容揭示了一些有關 Google 搜尋結果生成原理的重要細節。今天本男爵就來跟各位聊聊這其中獲得的寶貴洞察,或許會對您在設計網站內容時有一些不同的想法!
Thumbnail
近期 Google 搜尋引擎API機密文件的外流事件,絕對是近期震撼數位行銷世界的一大頭條,其內容揭示了一些有關 Google 搜尋結果生成原理的重要細節。今天本男爵就來跟各位聊聊這其中獲得的寶貴洞察,或許會對您在設計網站內容時有一些不同的想法!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News