使用ajax提交html表单

问题描述：

I'm trying to design a restaurant website as a project and every time I hit the submit button to order any food the page refreshes and jumps back to the top. I tried everything but can't figure out how to solve it.

This is what my button looks like at the moment:

  <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>

Thanks for any help.

我正在尝试将餐厅网站设计为项目，每次点击提交按钮订购任何食物页面刷新并跳回到顶部。我尝试了一切，但无法弄清楚如何解决它。 p>

这就是我的按钮目前的样子： p>

 ＆lt; div class =“BestellButton”＆gt; 
＆lt;  form action =“insertorder.php”method =“post”＆gt; 
＆lt; input type =“hidden”name =“artikelnummer”value =“'。$ row ['Artikelnummer']。'”/＆gt; 
  ＆lt; input type =“hidden”name =“URL”value =“Drinks.php”/＆gt; 
＆lt; button type =“submit”＆gt; Bestellen＆lt; / button＆gt; 
 
＆lt; / form＆gt; \  n＆lt; / div＆gt; 
  code>  pre> 
 
 感谢您的帮助。 p> 
  div>

答

You can use ajax post request on button click, so page will not refresh.

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

Also, on submit button click event, you have to use

preventDefault();

so page will not refresh on button click

答

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

使用ajax提交html表单

相关推荐