我有一个 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> 
最佳答案
您可以为每一行定义一个唯一的事件处理程序。但为此，您必须处理 DOM 元素，而不是生成 HTML 代码并将其放入表中。
我对你的代码做了一些修改，以便能够使用一些手工制作的 XML。但你应该在其中找到你需要的东西。
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");
}<html>
<button type="button" onclick="loadDoc()">Smartphones</button>
<table id="dem"></table>
</html>关于javascript - 如何发布表中的一行内容，该表是服务器 GET 请求的响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50064168/