使用Ajax提交HTML表單

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

您可以在單擊按鈕時使用ajax發布請求，因此頁面不會刷新。

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();

因此頁面不會在單擊按鈕時刷新

Answer 2

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