refre sh данные формы без перезагрузки страницы в WordPress сайте

Question

Я написал эту форму, используя html и PHP на своей веб-странице. Эта форма получает номер в качестве ввода. и добавляет желаемое число к 2. И печатает вывод.

Например, если мы введем число 5 на входе и нажмем кнопку отправки, страница перезагрузится по этому адресу: mysite.com/page1/?sen=5&sub=Submit. А на выходе напечатано число 7.

Функция «clearFormAndParams» также написана для очистки данных формы после обновления страницы.

Пока все хорошо. Но я хочу обновить sh информацию о форме, когда нажата кнопка отправки, без перезагрузки страницы.

Каков наилучший способ сделать это?

Я думаю, что я должен использовать Ajax. Но я ничего не знаю о сценариях. И я не знаю, как использовать Ajax здесь.

мой сайт - это сайт WordPress. Пожалуйста, ведите меня. Благодарен

<script>
function clearFormAndParams() {
    // Target each form input and set the value to "".
    document.querySelector("input[name='sen']").value = "";

    // Split the url by the "?" and then set the value to the first half.
    window.location = window.location.href.split("?")[0];
}
</script>



<form name="form1" action="" method="GET">
<input type="number" name="sen" placeholder="سن">
<input type="submit" name="sub" placeholder="ثبت">
</form>


<?php if ( isset($_GET['sub'])){
    //$sen1=0;
     $sen1 = $_GET['sen'];
    if (empty($sen1)){
         echo "ooopppss";
    }

    else {
    echo $sen1 + 2; }


 $pageWasRefreshed = isset($_SERVER['HTTP_CACHE_CONTROL']) && $_SERVER['HTTP_CACHE_CONTROL'] === 'max-age=0';


if($pageWasRefreshed ) {

    ?>

    <script type="text/javascript">
     clearFormAndParams();
    </script>

    <?php
}

}
?>