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

I'm creating a simple website and a html page on it which contains a table that shows products. I load this table using AJAX and it work properly. Here is a screenshot:

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

Under the table I have buttons which perform CRUD operations using AJAX. They communicate to a php script on a server outside of my domain using GET method. When I click on Add product it opens a form with a button that whose onclick event calls a function which adds a product using AJAX. But, when I click, the whole page reloads and the product is not added. If I put the value that says wheter the call is async to false, it works as intended and the product is added to the table, however that is not the point of AJAX.

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

This is my code for adding a product(delete and update are almost the same).

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

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

When I click on submit this function is called:

当我点击提交时,调用此函数:

function addProduct(){

    var isValid = true;
    var url = "http://zamger.etf.unsa.ba/wt/proizvodi.php?brindexa=16390";

    var amount = document.form.kolicina.value;
    var naziv = document.form.naziv.value;
    var slikaurl = document.form.url.value;

    var validity = validateFields(naziv, slikaurl, amount);
    if(!validity) return false;
    var product = {
        naziv: naziv,
        kolicina: amount,
        slika: slikaurl
    };
    var requestObject = new XMLHttpRequest();
    requestObject.onreadystatechange = function(event) {
        if (requestObject.readyState == 4 && requestObject.status == 200)
        {
            loadProducts();
            event.preventDefault();
        }
    }
    requestObject.open("POST", url, true);
    requestObject.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    requestObject.send("akcija=dodavanje" + "&brindexa=16390&proizvod=" + JSON.stringify(product));
}

4 个解决方案

#1

It is because you are not preventing the default action of the submit button click.

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

You can return false from an event handler to prevent the default action of an event so

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

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

---

But since you have a form with a submit button, I think it will be better to use the submit event handler like

但是由于你有一个带有提交按钮的表单,我认为使用提交事件处理程序会更好

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

#2

Your problem is that your submit button still executes a real submit. You could change your addProducts method. The method have to return false to prevent the real submit.

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

#3

Submit button performs default Submit action for HTML code.

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

Try to change Submit tag into Button tag. Or after AddProduct() in OnClick JS Action put

尝试将提交标签更改为Button标签。或者在OnClick JS Action中放入AddProduct()之后

return false;

#4

Simple Change put input type="button" instead of tpye="submit"

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

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