使 jQuery Ajax 代碼更高效/合乎邏輯的選項

Question

我有以下 HTML 來顯示從 ajax 腳本 (ajax.php) 中提取的內容：

HTML

<ul class="list-unstyled" id="var_adjectives"><li><a href='#'>Loading...</a></li></ul>
<button id="37" onclick='update_adjectives();'>Refresh</button>

<hr />

<ul class="list-unstyled" id="var_brands"><li><a href='#'>Loading...</a></li></ul>
<button id="37" onclick='update_brands();'>Refresh</button>

<hr />

<ul class="list-unstyled" id="var_clothes"><li><a href='#'>Loading...</a></li></ul>
<button id="37" onclick='update_clothes();'>Refresh</button>

<hr />

當頁面首次加載時，以下 JS 用於根據相關的<ul>標簽填充列表項（每次傳入兩個參數）：

Javascript 頁面加載

$(document).ready(function(){
    $.post('ajax.php',{u:37,n:1} ,function(data){ var this_record = data.output; $('#var_adjectives').html(this_record);},'json');
    $.post('ajax.php',{u:37,n:33},function(data){ var this_record = data.output; $('#var_brands').html(this_record);},'json');
    $.post('ajax.php',{u:37,n:67},function(data){ var this_record = data.output; $('#var_clothes').html(this_record);},'json');
});

refresh按鈕可用於刷新相關<ul>標簽中的內容，調用以下相關 JS 函數，從 3 個按鈕中的每一個上的onclick事件：

Javascript 刷新函數

function update_adjectives() {
    $.post('ajax.php'
         , {u:37,n:1}
         , function(data){ var this_record = data.output; $('#var_adjectives').html(this_record); }
         , 'json')
};

function update_brands() { 
    $.post('ajax.php'
         , {u:37,n:33}
         , function(data){ var this_record = data.output; $('#var_brands').html(this_record); }
         , 'json')
};

function update_clothes() {
    $.post('ajax.php'
         , {u:37,n:67}
         , function(data){ var this_record = data.output; $('#var_clothes').html(this_record); }
         , 'json')
};

如您所見，JS 的基本設計有很多重疊。

我有這些問題：

1. 我一直在研究如何在第一次加載頁面時在用於填充內容的 JS 塊中以一行結束。

2. 我只想使用 1 個函數來刷新內容 - 因為在上面的示例中我有 3 個塊，但在我的真實頁面中我有大約 30 個塊。

雖然 JS 是在頁面加載時由 PHP 代碼創建的（而不是我長期編寫它），但擁有更干凈的代碼仍然會很好，避免使用例如 30 個刷新函數和 30 行代碼來填充每個首次加載頁面時的不同<ul> ID。

在每種情況下，我都可以看到我需要傳遞相關<ul>的 ID，但是如果我能實現我想要做的事情，我就會陷入困境。

使用onclick事件可能也有很多問題！

任何建議將不勝感激，謝謝。

Answer 1

最有可能的阻礙因素是您的 API 端點設計。 根據您發布的內容，您必須一次訪問一個類別，並且必須通過發送{u:N,n:N}組合對象作為 POST 請求的正文來完成。

如果您的端點接受不同的對象，它將大大簡化事情。 像{category:'name'}這樣的東西可以提供更大的靈活性。

您可以將{category: 'all'}用於所有類別的初始視圖，並將{category: 'clothes'}用於更新/刷新的各個類別。

將其擴展到單擊刷新按鈕。 您可以使用單個事件處理程序和事件冒泡來處理每次按鈕單擊。

首先，您將事件處理程序添加到所有<ul>元素的包含元素。

鑒於此布局：

<div id='container'>
  <ul><li><span>loading...</span></li></ul>
  <button data-category="adjectives">Refresh</button>
  <ul><li><span>loading...</span></li></ul>
  <button data-category="brands">Refresh</button>
  <ul><li><span>loading...</span></li></ul>
  <button data-category="clothes">Refresh</button>
</div>

您可以像這樣對所有按鈕點擊做出反應：

document.getElementById('container').addEventListener('click', update);

update()事件處理程序可以通過檢查按鈕上的data-屬性來確定單擊了哪個按鈕。 然后，使AJAX請求和數據放置到正確的<ul>通過找到最接近的或prev()兄弟<ul>元素。

function update() {
  const category = this.dataset.category;
  $.post('ajax.php', {category: category}
    , function(data) {
    $('button').data(category).prev('ul').html(data.output);
  }, 'json')
};