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

Question

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

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

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

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

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

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

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