表单交互上的AJAX和提交按钮

Question

我正在创建一个简单的网站和一个html页面，其中包含一个显示产品的表格。我使用AJAX加载此表并且它正常工作。这是一个截图：

在表格下面，我有使用AJAX执行CRUD操作的按钮。 他们使用GET方法与我域外的服务器上的php脚本进行通信。 当我点击添加产品时，它会打开一个带有按钮的表单，该按钮的onclick事件调用一个使用AJAX添加产品的功能。但是，当我点击时，整个页面重新加载并且不添加产品。如果我将调用异步的值设置为false，则它按预期工作，产品将添加到表中，但这不是AJAX的重点。

这是我添加产品的代码（删除和更新几乎相同）。

[incative]

当我点击提交时，此功能被称为：

<div id="addProductPopup">
    <div id="popupContact">
        <form id="form" method="post" name="form">
            <img id="close" src="/servis/Resursi/Slike/close.png" onclick ="hide('addProductPopup');">
            <h2>Dodavanje proizvoda</h2>
            <hr>
            <input id="name" name="naziv" placeholder="Naziv proizvoda" type="text" required>
            <input id="kolicina" name="kolicina" placeholder="Količina proizvoda" type="text" required>
            <input id="url" name="url" placeholder="URL slike" type="text" required>
            <input type="submit" value="Pošalji" class="popupButtons" onclick="addProduct()">
        </form>
    </div>

Answer 1

这是因为您没有阻止提交按钮单击的默认操作。

您可以从事件处理程序返回false以防止事件的默认操作

<input type="submit" value="Pošalji" class="popupButtons" onclick="addProduct(); return false;">

但是因为你有一个带有提交按钮的表单，我认为使用像

这样的提交事件处理程序会更好

<form id="form" method="post" name="form" onsubmit="addProduct(); return false;">
    ....
    <input type="submit" value="Pošalji" class="popupButtons">

Answer 2

您的问题是您的提交按钮仍然执行真实的提交。您可以更改addProducts方法。该方法必须返回false以防止真正的提交。

Answer 3

“提交”按钮执行HTML代码的默认提交操作。

尝试将提交标记更改为Button标记。或者在OnClick JS Action中添加AddProduct（）之后

return false;

Answer 4

简单更改输入type =“button”而不是tpye =“submit”

<input type="button" value="Pošalji" class="popupButtons" onclick="addProduct()">