Отправить HTML-форму, используя ajax

Question

Я пытаюсь создать ресторанный веб-сайт как проект, и каждый раз, когда я нажимаю кнопку «Отправить», чтобы заказать любую еду, страница обновляется и возвращается наверх.Я попробовал все, но не могу понять, как это решить.

Вот так выглядит моя кнопка на данный момент:

  <div class="BestellButton">
                        <form action = "insertorder.php"  method ="post" >
                            <input type="hidden" name = "artikelnummer" value ="'.$row['Artikelnummer'].'"/>
                            <input type="hidden" name="URL" value= "Drinks.php" />
                            <button type = "submit">Bestellen</button>

                        </form>
                   </div>

Спасибо за любую помощь.

Answer 1

<div class="BestellButton" id="ankerlink">
<form action = "insertorder.php#ankerlink"  method ="post">

Answer 2

Вы можете использовать ajax post request при нажатии кнопки, чтобы страница не обновлялась.

var http = new XMLHttpRequest();
var url = "insertorder.php";
var params = 'name1=value1&name2=value2';
http.open('POST', url, true);

// post header
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);

Кроме того, при отправке события нажатия кнопки, вы должны использовать

preventDefault();

такстраница не обновляется при нажатии кнопки