Как сделать поиск по бд без перезагрузки?

есть форма

<form name="f1" method="post" action="db.php">
<input type="search" name="search_q"/></br>
</br>
<input type="submit" value="Поиск"/></br>
</form>

ну и сам скрипт

$search_q=$_POST['search_q'];
$l= mysqli_connect('', '', '', '' );
$search_q = trim($search_q);
$search_q = strip_tags($search_q);
$result = mysqli_query($l, "SELECT laaj.balance from local_auth_account_journal  laaj
JOIN (SELECT account_id, MAX(action_date) action_date
  FROM local_auth_account_journal laaj
 WHERE
 account_id = (
 SELECT id From local_auth_account  WHERE 
account_type_id = 33 
and
params = (
select client from trm_in_card_client WHERE card = (select id from trm_in_cards WHERE start_card_code like '9%{$search_q}')))
GROUP BY account_id ) maxdataaddaccid 
USING(account_id,action_date)
");    
while ($row = mysqli_fetch_assoc($result)) {
 echo "Баланс : {$row['balance']} <br>";
  echo "номер карты : $search_q ";
}

как без перезагрузки страницы вывести полученные данные? UPD

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Проверка баланса</title>
  <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form name="f1" method="post" action="db.php">
<input type="search" id="search_q"  name="search_q"/></br>
</br>
<input type="button" value="Поиск"/></br>
</form>
<script>

function send() {
let searchStr = $('#search_q').val();
 $.post("db.php", {search_q:searchStr}, onAjaxSuccess )
    function onAjaxSuccess(data) {
    alert(data);
  }
}
;
</script>
</body>
</html>

Ответы (1 шт):

Автор решения: Crasher

Вы-же проставили нужные теги даже к вопросу, которые можно и за ответ считать) Подключите jquery, из кнопки уберите type submit, оаставьте, например, type="button", добавьте onclick='send()'. Это самый примитивный вариант, чтобы понять, как работать. Чтобы было удобней работать, инпуту с именем search_q добавьте id, для примера пусть будет search_q. На серверной части пока что менять ничего не надо для данного примера.

function send() {
let searchStr = $('#search_q').val();
 $.post("db.php", {search_q:searchStr}, onAjaxSuccess )
    function onAjaxSuccess(data) {
    alert(data);
  }
}

→ Ссылка