Какими методами можно вывести и как правильно выводить на страницу данные полученные от сервера в результате обработки Ajax запроса?

Я постараюсь описать как можно подробнее суть моей проблемы, что я пытаюсь сделать и что я уже пробовал сделать, итак..

Имеется каталог товаров и мне нужно, что бы по нажатию на определённый элемент списка выводились карточки товаров относящиеся к тематике выбранного элемента списка.

.

Как реализовать вывод карточек товаров я знаю. И без Ajax это выглядело бы так:

Была бы ссылка передающая название раздела методом "GET".

<a href = "?pc">Комплектующие ПК</a>

Код php который выводит карточки товара в нужном месте:

if (isset(($_GET['pc']))) {
    $query = "SELECT * FROM `tableName`";
    $result = $pdo->query($query);
    foreach ($result as $array) {
        $name = $array['name']; //наименование товара
        $price = $array['price']; //цена товара
        include 'card.php';  //подключение шаблона "карточки товара"
    }
}

И сам шаблон карточки товара "card.php":

<div class = "card">
  <div class = "card-header fl">
      <p class = "product-name fl-al-c"> <?php echo $name; ?> </p> <!-- Наименование -->
  </div>
  <div class = "card-content fl">
      <img src = "images/img.png" alt = "#">
  </div>
  <div class = "card-footer fl-al-c">
      <p class = "price"> <?php echo $price; ?> </p> <!-- Цена товара -->
  </div>
</div>

Но теперь мне необходимо сделать тоже самое, но с помощью Ajax который я начал изучать совсем недавно.

Я построил следующий Ajax запрос:

Sel.on('click', function(){
Ext.Ajax.request({
    url: 'php/handler.php',
    method: 'POST',
    params: { 
        category: 'pc'
    },
    success: function (response) {
        var objAjax = Ext.decode(response.responseText); //запись полученных данных в objAjax
        var elementsInObjAjax = (Object.keys(objAjax).length); //количество элементов в objAjax
        console.log("Ajax request: success // (sendAjaxRequest)");
        console.log(objAjax);
        for (var i = 0; i < elementsInObjAjax; i++) {
            name = objAjax[i]['name'];  //наименование
            price = objAjax[i]['price'];    //цена
            $('#products').load('php/card.php');
        }
    },
    failure: function () {
        console.log("Ajax request: failure // (sendAjaxRequest)");
    }
  });
});

И написал вот такой код обработчика:

if ((isset($_POST['category'])) && (!empty($_POST['category']))) {
    $tableName = $_POST['category'];
    $query = "SELECT * FROM `$tableName`";
    $result = $pdo->query($query);
    $data = array();
    foreach ($result as $array) {
        array_push($data, $array);
    }
    echo json_encode($data);
}

Как видно из консоли, все данные были получены.

Но в результате, выводиться только одна карточка. Код в теле цикла for повторяется столько раз, сколько элементов в массиве полученном от сервера. Но вот следующий фрагмент:

$('#products').load('php/card.php');

Похоже работает только один раз или просто заменяет предыдущие данные в карте на новые.

Я довольно долго рылся в интернете в поисках ответа на тему обработки ответа и вставки на страницу, но так ничего и не нашёл. Видимо плохо искал.