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

來源

2015-05-04 Matsura

這是因爲你不會阻止提交按鈕點擊的默認操作。

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

來源

2015-05-04 10:03:13

謝謝你，你是第一個，你給了一個替代。 – Matsura

您的問題是您的提交按鈕仍然執行一個真正的提交。你可以改變你的addProducts方法。該方法必須返回false以防止真正的提交。

來源

2015-05-04 10:04:18 webcodecs

提交按鈕爲HTML代碼執行默認提交操作。

嘗試將提交標籤更改爲按鈕標籤。或addProduct命令（）中的OnClick JS行動後把

return false;

來源

2015-05-04 10:06:21

簡單更改把輸入類型=「按鈕」，而不是類不=「提交」

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

來源

2015-05-04 10:07:37

AJAX和表單交互提交按鈕

回答

相關問題