Question

我有一个javascript代码，它将get请求发送到服务并将xml响应放入表中，我已经为for循环中的每一行创建了按钮，但是如何将该表行的内容发布回服务器？

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "URL OF SERVER", true);
  xhttp.send();
}

function myFunction(xml) {
  var i;
  var option;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>TYPE</th><th>MAKE</th><th>PRICE</th><th>MODEL</th><th>ID</th><th>Select</th></tr>";
  var x = xmlDoc.getElementsByTagName("itemnumber");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>"+
    x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("make")[0].childNodes[0].nodeValue +
    "</td><td>"+
x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("model")[0].childNodes[0].nodeValue +
    "</td><td>"+
 x[i].getElementsByTagName("id")[0].childNodes[0].nodeValue +
 "</td><td>"+  
  "<button>Add item to cart </button>"
    
 "</td></tr>";
  }
  document.getElementById("dem").innerHTML = table;

}

<html> 
<button type="button" onclick="loadDoc()">Smartphones</button>
<table id="dem"></table>
</html>

如果我在onclick中调用一个函数，同样的函数会被调用到所有按钮，所以我有点卡在这里卡在这里，有什么建议吗？ GET请求的响应在

下面的链接中给出

Answer 1

您可以尝试通过id创建您创建的按钮，然后添加一个函数将行发送回服务器。

'<button id="button_' + i +'" type="button" onclick="BackToServer(values to pass here)">Add item to cart </button>';

Answer 2

您可以为每一行定义唯一的事件处理程序。但为此，您必须处理DOM元素，而不是生成HTML代码并将其放在表中。

我稍微改变了你的代码，以便能够使用一些手工制作的XML。但你应该找到你需要的东西。

＆＃13;

function loadDoc() {
    /* 
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
      }
    };
    xhttp.open("GET", "URL OF SERVER", true);
    xhttp.send();
    */
    // manually invoking myFunction because I don't have a xhr 
    myFunction();
}

function myFunction(xml) {
    var i;
    var option;
    // var xmlDoc = xml.responseXML;
    var xmlDoc = getFakeXml();

    var table = "<tr><th>TYPE</th><th>MAKE</th><th>PRICE</th><th>MODEL</th><th>ID</th><th>Select</th></tr>";
    document.getElementById("dem").innerHTML = table;
    var x = xmlDoc.getElementsByTagName("itemnumber");

    for (i = 0; i < x.length; i++) {
        // let's create a TR element for each itemnumber 
        var row = createRow(x[i]);
        // appending the created row to your table : 
        document.getElementById("dem").appendChild(row);
    }


}

function createRow(rowData) {
    // local variables : 
    var tr, item = {};
    // create the TR element 
    var tr = document.createElement("tr");
    // for each field, retrieving data from rowData
    item.type = getField(rowData, "type");
    // and adding a cell to the row : 
    addCell(rowData, item.type, tr);
    item.make = getField(rowData, "make");
    addCell(rowData, item.make, tr);
    item.price = getField(rowData, "price");
    addCell(rowData, item.price, tr);
    item.model = getField(rowData, "model");
    addCell(rowData, item.model, tr);
    item.id = getField(rowData, "id");
    addCell(rowData, item.id, tr);

    // creation of the button element, to be able to add a unique event listener to it :
    var button = document.createElement("button");
    button.innerHTML = "Add item to cart";
    button.onclick = function() {
        /* code your event handler here 
        it has access to all the data retrieved from rowData 
        */
        console.log("adding element to cart", item);
    }

    tr.appendChild(button);

    return tr;
}

function getField(rowCell, fieldName) {
    var data = rowCell.getElementsByTagName(fieldName)[0].childNodes[0].nodeValue;
    return data;
}

function addCell(rowCell, data, row) {
    var cell = document.createElement("td");
    cell.innerHTML = data;
    row.appendChild(cell);
}

/* this is a just a function returning some fake XML. Only needed for this snippet */
function getFakeXml() {
    var xmlString = `<root><itemnumber>
	<type>Smartphone</type>
	<make>Nokia</make>
	<price>14000.0</price>
	<model>Lumia830</model>
	<id>S00010</id>
</itemnumber>
<itemnumber>
	<type>Smartphone</type>
	<make>Samsung</make>
	<price>10000.0</price>
	<model>Galaxy A5</model>
	<id>S00002</id>
</itemnumber>
<itemnumber>
	<type>Smartphone</type>
	<make>Samsung</make>
	<price>10000.0</price>
	<model>Galaxy A5</model>
	<id>S00001</id>
</itemnumber></root>`;
    var parser = new DOMParser();
    return parser.parseFromString(xmlString, "text/xml");
}

＆＃13;

<html> 
<button type="button" onclick="loadDoc()">Smartphones</button>
<table id="dem"></table>
</html>

＆＃13;

Answer 3

您是否查看了localStorage或sessionStorage？您可以将响应数据保存在那里，直到您再次需要它为止。

如何从表中发布行的内容，这是来自服务器的GET请求的响应？

3 个答案: