如何在 AJAX 驅動的網站上有效選擇和啟動控制項？

在AJAX 驅動的網站上選擇並啟動正確的控制項

建立與動態、AJAX 驅動的網站互動的腳本時，了解底層頁面至關重要結構和事件處理程序。這是有效定位和操作這些網站上的元素的逐步指南。

1.檢查頁面元素和事件

使用 Firebug 或 DOM 檢查器等瀏覽器工具，識別要與之互動的元素的 CSS/jQuery 選擇器。這些工具還揭示了附加到每個元素的事件。

2。將事件對應到操作

決定觸發所需操作的事件序列。例如，選擇下拉式選單可能涉及滑鼠按下事件，而不是點擊。

3.使用 WaitForKeyElements

waitForKeyElements 函數用於處理由 JavaScript 動態建立或修改的元素。它允許您指定 CSS 選擇器和在元素出現時執行的回調函數。

4.序列操作

使用 waitForKeyElements 建立一系列步驟，以正確的順序模擬使用者互動。每個回調函數應在各自的元素上執行操作和/或觸發事件。

範例：Nike 自動購買腳本

目標：自動選擇鞋碼，加入購物車，並在 Nike.com運動鞋上結帳

實作：

waitForKeyElements(
    "div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown",
    function(jNode) {
        triggerMouseEvent(jNode[0], "mousedown");
    }
);

waitForKeyElements(
    "ul.selectBox-dropdown-menu li a:contains('10')",
    function(jNode) {
        if ($.trim(jNode.text()) === "10") {
            triggerMouseEvent(jNode[0], "mouseover");
            triggerMouseEvent(jNode[0], "mousedown");
            triggerMouseEvent(jNode[0], "mouseup");
        }
    }
);

waitForKeyElements(
    "div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox span.selectBox-label:contains('(10)')",
    function(jNode) {
        var addToCartButton = $(
            "div.footwear form.add-to-cart-form div.product-selections div.add-to-cart"
        );
        triggerMouseEvent(addToCartButton[0], "click");
    }
);

waitForKeyElements(
    "div.mini-cart div.cart-item-data a.checkout-button:visible",
    function(jNode) {
        triggerMouseEvent(jNode[0], "click");
    }
);

說明：

1. 第13步：觸發事件鞋碼下拉清單。
2. 第 2 步：開啟開啟下拉式選單，選擇所需的鞋碼（「10」）。
3. 第 3 步和第 4 步：等待顯示所選鞋碼，然後按一下「加入購物車」按鈕。
4. 第5步：當迷你購物車出現時，點選「結帳」按鈕。

以上是如何在 AJAX 驅動的網站上有效選擇和啟動控制項？的詳細內容。更多資訊請關注PHP中文網其他相關文章！