update BD без перезагрузки страницы

Как обновить данные в БД без перезагрузки страницы? Код ниже выводит значение формы, но если в test.php сделать update в БД, то код не работает и в консоли выдается ошибка: Failed to load resource: the server responded with a status of 500 (). Подскажите, что не так?

<form onsubmit="test(event)">
    <input type="hidden" name="id_pic" id="id_pic" value="112"/>
    <button type="submit">GO</button>
</form>
<div id="demo"></div>

<script type="text/javascript">
   function test(e) 
   {
     e.preventDefault();
     let id_pic = document.getElementById("id_pic").value;
     let data = "id_pic=" + id_pic;
      
     xhr = new XMLHttpRequest();

     xhr.open("POST", "test.php");
     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xhr.send(data);

     xhr.onreadystatechange = function() 
     {
       if (this.readyState == 4 && this.status == 200) 
       {
         document.getElementById("demo").innerHTML = this.responseText;
       }
     };
   }

test.php

echo $_POST['id_pic'];

$query = $db->getQuery(true);
$query
    ->update($db->quoteName('#__test'))
    ->set($db->quoteName('id_pic') .'='. $db->quote($_POST['id_pic']))
    ->where($db->quoteName('id')   .'='. $db->quote(1));

$db->setQuery($query);
$result = $db->execute();