AJAX和表单交互提交按钮

问题描述：

我正在创建一个简单的网站和一个html页面，其中包含一个显示产品的表格。我使用AJAX加载此表，并且它正常工作。下面是截图：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)); 
}

答

这是因为你不会阻止提交按钮点击的默认操作。

您可以从事件处理程序返回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">

谢谢你，你是第一个，你给了一个替代。 – Matsura

答

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

答

提交按钮为HTML代码执行默认提交操作。

尝试将提交标签更改为按钮标签。或addProduct命令（）中的OnClick JS行动后把

return false;

答

简单更改把输入类型=“按钮”，而不是类不=“提交”

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

AJAX和表单交互提交按钮

相关推荐