Rise

Да, нужно сделать запрос. AJAX это вообще общее понятие (устаревшее) для всех сетевых запросов из скрипта. В JS для этого есть три класса - XMLHttpRequest, WebSocket, EventSource, и один метод - fetch, плюс куча библиотек и фреймворков на их основе. WebSocket и EventSource нужны для приложений реального времени, XMLHttpRequest и fetch - для остального. Вам подойдет XMLHttpRequest или fetch. Различия в том, что первый использует сallback-и, второй - promise-ы, но главное отличие первого это события прогресса, причем в обе стороны:

// В порядке выполнения:
 
xhr.onloadstart // 1
 
xhr.upload.onloadstart // 2
xhr.upload.onprogress // 3
xhr.upload.onload // 4
xhr.upload.onerror // 4
xhr.upload.onabort // 4
xhr.upload.ontimeout // 4
xhr.upload.onloadend // 5
 
// download
xhr.onprogress // 6
xhr.onload // 7
xhr.onerror // 7
xhr.onabort // 7
xhr.ontimeout // 7
xhr.onloadend  // 8
 
xhr.onreadystatechange // 6-8

Вы можете использовать этот паттерн XMLHttpRequest (в интернете много неактуальных примеров, либо старые для IE, либо без обработки ошибок):

function request(options) {
    let requestJson = options.data;
    let requestBody = JSON.stringify(requestJson);
    let xhr = new XMLHttpRequest();
    xhr.open('POST', options.url);
    xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
    xhr.responseType = 'json';
    xhr.onload = function () {
        if (xhr.status == 200) {
            if (xhr.response == null) {
                options.error.call(xhr, 'FORMAT_ERROR');
            } else {
                options.success.call(xhr, xhr.response);
            }
        } else {
            options.error.call(xhr, 'SERVER_ERROR');
        }
    };
    xhr.onerror = function () {
        options.error.call(xhr, 'NETWORK_ERROR');
    };
    xhr.send(requestBody);
}

function click() {
    // ...FORM STUFF...

    let requestData = { 'name1': 'value1', 'name2': 'value2' };

    request({
        url: 'json.php',
        data: requestData,
        success: function (response) {
            console.log('XHR:', response);

            // response['key1'], response['key2']

            // ...TABLE STUFF...
        },
        error: function (message) {
            console.error('XHR:', message);
        },
    });
}

<?php

// json.php

header('Content-Type: application/json; charset=utf-8');

$requestBody = file_get_contents('php://input');
$requestJson = json_decode($requestBody, true);

// $requestJson['name1'], $requestJson['name2']

// ...DATABASE STUFF...

$responseJson = [ 'key1' => 'value1', 'key2' => 'value2' ];
$responseBody = json_encode($responseJson);

echo $responseBody;

jQuery(function ($) {
    $('body').on('click', 'button[name=update_cart]', function () {
        var number = 0;
        $('input[id^=quantity_]').each(function (index, input) {
            number += Number(input.value);
        });
        $('span.count-number').text(number);
    });
});

Используйте .load() вместо $.ajax(), там можно загрузить часть страницы:
$("#result").load("ajax/test.html #container");