為什么使用admin-ajax.php會導致20個狀態為200的GET請求？

我有一個私人前端儀表板，允許用戶管理他們的客戶資訊、檔案等——本質上是一個 CRM。在一個特定頁面上，客戶端都加載到加載頁面上，然后每個客戶端都有通過 ajax 加載的附加資訊，以確保我不會讓網站陷入困境。

現在一切正常，但正如主題行所提到的，當函式運行時，我收到 20 次對 admin-ajax.php 的呼叫，并且都成功回傳。因此，我想在開發程序中弄清楚這一點，而不是以后成為資源問題。

我正在使用下面的函式來處理 AJAX 請求，下面的 scripts.js 檔案包含我在下面包含的腳本。根據單擊的選項卡，然后我加載特定模板：

//prep the JS   Ajax
function cyber_load_scripts() {
    wp_enqueue_script('cyber_script', get_stylesheet_directory_uri() . '/js/scripts.js', array('jquery'), false, true );
    wp_localize_script('cyber_script', 'cyberAjax', array('ajaxurl' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'cyber_load_scripts');

function ajax_load_tabs() {

$tab_id = $_REQUEST['id'];
$user_id = $_REQUEST['userid'];

if (str_contains($tab_id,'#onboarding')) {
    get_template_part( '/page-templates/dashboard/broker-dashboard', 'onboarding', array (
    'user_id' => $user_id,
    ));
}

elseif (str_contains($tab_id,'#tasks')) {
    get_template_part( '/page-templates/dashboard/broker-dashboard', 'tasks', array (
    'user_id' => $user_id,
    ));
}

elseif (str_contains($tab_id,'#incidents')) {
    get_template_part( '/page-templates/dashboard/broker-dashboard', 'incidents', array (
    'user_id' => $user_id,
    ));
}
                                                                    
die();

}
    
add_action('wp_ajax_ajax_load_tabs', 'ajax_load_tabs');
add_action('wp_ajax_nopriv_ajax_load_tabs', 'ajax_load_tabs');

以及在客戶端單擊選項卡時初始化 ajax 呼叫的腳本。我跳過第一個選項卡，因為它與頁面一起加載。然后我將選項卡 ID 和用戶 ID 傳遞給 AJAX 請求：

    $( ".tabContent" ).each(function(index) {
        $('.profileTabs ul li a').click(function(e) {
            
            e.preventDefault();
            
            //The first tab (overview) loads with the page
            if($(this).text().match('Overview')) {
                return false;
            }
            
            else {
                var tab_id = $(this).attr('href'); 
                var userid = $(this).attr('data-user');
    
                $.ajax({ 
                    url: cyberAjax.ajaxurl,
                    data: ({ 
                        action: 'ajax_load_tabs',
                        id: tab_id,
                        userid: userid,
                    }),
                    
                    success: function(data){
                              $(tab_id).html(data);
                    },
                    error: function(data)  
                    {  
                    //alert("Error!");
                    console.log("Error!");
                    return false;
                    }  
    
                }); 
            }    
        }); 

有什么想法可以按預期只打一次電話嗎？請參閱下面的螢屏截圖以供參考：

uj5u.com熱心網友回復：

我不是 100% 確定，但從我從代碼中可以看出，您似乎將點擊偵聽器系結到所有鏈接，每個選項卡一次。

你有

$( ".tabContent" ).each(function(index) {

它將為每個具有類的專案迭代一次，tabContent并且對于每個專案，你正在呼叫

$('.profileTabs ul li a').click(function(e) {

這將為.profileTabs ul li a頁面上的每個人系結一個單擊偵聽器，而不僅僅是您正在回圈的 tabContent 容器內的那些，這是我假設您正在嘗試做的事情。

如果您實際上并不關心tabContent您所在的容器（似乎是這種情況，因為您除了立即系結點擊偵聽器之外沒有做任何事情），我建議您使用外部 .each 即

$('.profileTabs ul li a').click(function(e) {
    e.preventDefault();
    
    //The first tab (overview) loads with the page
    if($(this).text().match('Overview')) {
        return false;
    }
    
    else {
        var tab_id = $(this).attr('href'); 
        var userid = $(this).attr('data-user');

        $.ajax({ 
            url: cyberAjax.ajaxurl,
            data: ({ 
                action: 'ajax_load_tabs',
                id: tab_id,
                userid: userid,
            }),
            
            success: function(data){
                        $(tab_id).html(data);
            },
            error: function(data)  
            {  
            //alert("Error!");
            console.log("Error!");
            return false;
            }  

        }); 
    }    
});

如果您需要/只想將其系結到與tabContent元素中的選擇器匹配的鏈接，只需更改選擇器以包含 tabContent 類，即$('.tabContent .profileTabs ul li a').click(function(e) {...

標籤：javascript php 阿贾克斯

上一篇：如何在jqueryajax中將資料作為物件傳遞

下一篇：在keyup上發送ajax后Laravel空請求