0

我目前正在帮助我父亲建设网站。他问我是否可以自动为他的客户“出价”进行估算，然后我在一夜之间为他构建了一个桌面原型应用程序。桌面应用程序是一个 Swing 应用程序，它使用 java 的 XMLEncoder/Decoder 来加载和保存文件，并允许他编辑客户可以选择的项目（以及图片、小时费率等）。他非常喜欢这个原型，所以他让我把它添加到他的网站上。

我不是一个非常有经验的网络开发人员（我从未在行业中做过），但同意并即将开始实施。这个项目的目标是让他使用易于使用的桌面 Swing 应用程序为“投标菜单”的外观生成 XML，然后让网站使用 Javascript 读取 XML 以生成所有项目。作为 web-dev 上的菜鸟，我的问题是，读取 XML 以生成网页的正确方法是什么？我一直在寻找类似于 JS 中的 XML 解码器的东西，但只找到了 XMLDOM。任何一般提示/教程/启发式将不胜感激。

下面是来自原型的演示 XML 文件，每组都不同，每个项目都是原型，您可以输入该组的数量和总数，所有组都将反映在网页上。

<?xml version="1.0" encoding="UTF-8"?>
<java version="1.8.0_60" class="java.beans.XMLDecoder">
 <object class="bidTool.models.BidToolModel" id="BidToolModel0">
  <void property="bidItems">
   <void method="add">
    <object class="bidTool.models.ItemSet" id="ItemSet0">
     <void property="description">
      <string>Testing Testing 123</string>
     </void>
     <void property="mySubsets">
      <void method="add">
       <object class="bidTool.models.ItemSet" id="ItemSet1">
        <void property="description">
     <string>Testing Testing 123</string>
    </void>
    <void property="myItems">
     <void method="add">
      <object class="bidTool.models.BidItem">
       <void property="cost">
        <double>10.0</double>
           </void>
           <void property="itemName">
            <string>Marble Tile</string>
           </void>
          </object>
         </void>
         <void method="add">
          <object class="bidTool.models.BidItem">
           <void property="cost">
            <double>10.0</double>
           </void>
           <void property="itemName">
            <string>Ceramic Tile</string>
           </void>
          </object>
         </void>
        </void>
        <void property="setName">
         <string>Tieling</string>
        </void>
       </object>
      </void>
     </void>
     <void property="setName">
      <string>Bathroom</string>
     </void>
    </object>
   </void>
  </void>
  <void property="globalItems">
   <void method="add">
    <object class="bidTool.models.BidItem">
     <void property="cost">
      <double>34.243</double>
     </void>
     <void property="itemName">
      <string>Toilet</string>
    </void>
    </object>
   </void>
  </void>
 </object>
</java>
4

1 回答 1

1

要解析 XML 以便您可以更轻松地使用 JavaScript 读取它，请使用以下DOMParser对象：

/* Same XML as in question */
var xmlString = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<java version=\"1.8.0_60\" class=\"java.beans.XMLDecoder\">\n <object class=\"bidTool.models.BidToolModel\" id=\"BidToolModel0\">\n  <void property=\"bidItems\">\n   <void method=\"add\">\n    <object class=\"bidTool.models.ItemSet\" id=\"ItemSet0\">\n     <void property=\"description\">\n      <string>Testing Testing 123</string>\n     </void>\n     <void property=\"mySubsets\">\n      <void method=\"add\">\n       <object class=\"bidTool.models.ItemSet\" id=\"ItemSet1\">\n        <void property=\"description\">\n     <string>Testing Testing 123</string>\n    </void>\n    <void property=\"myItems\">\n     <void method=\"add\">\n      <object class=\"bidTool.models.BidItem\">\n       <void property=\"cost\">\n        <double>10.0</double>\n           </void>\n           <void property=\"itemName\">\n            <string>Marble Tile</string>\n           </void>\n          </object>\n         </void>\n         <void method=\"add\">\n          <object class=\"bidTool.models.BidItem\">\n           <void property=\"cost\">\n            <double>10.0</double>\n           </void>\n           <void property=\"itemName\">\n            <string>Ceramic Tile</string>\n           </void>\n          </object>\n         </void>\n        </void>\n        <void property=\"setName\">\n         <string>Tieling</string>\n        </void>\n       </object>\n      </void>\n     </void>\n     <void property=\"setName\">\n      <string>Bathroom</string>\n     </void>\n    </object>\n   </void>\n  </void>\n  <void property=\"globalItems\">\n   <void method=\"add\">\n    <object class=\"bidTool.models.BidItem\">\n     <void property=\"cost\">\n      <double>34.243</double>\n     </void>\n     <void property=\"itemName\">\n      <string>Toilet</string>\n    </void>\n    </object>\n   </void>\n  </void>\n </object>\n</java>";

var parser = new DOMParser();
var xml = parser.parseFromString(xmlString, "text/xml");

/* Do something with the parsed XML: */

var myItems = xml.querySelectorAll("void[property=myItems] object[class='bidTool.models.BidItem']");

for(var i = 0;i < myItems.length;i++){
  var table = document.createElement("table");
  for(var j = 0;j < myItems[i].children.length;j++){
    var row = document.createElement("tr");
    var tableHeadingProperty = document.createElement("th");
    var tableDataValue = document.createElement("td");
    tableDataValue.textContent = myItems[i].children[j].firstElementChild.textContent;
    tableHeadingProperty.textContent = myItems[i].children[j].getAttribute("property");
    row.appendChild(tableHeadingProperty);
    row.appendChild(tableDataValue);
    table.appendChild(row);
  }
  document.body.appendChild(table);
}
table {
  border: 1px solid black;
  margin-bottom: 10px;
}

浏览解析后的 JSON 的方式几乎与 HTML 相同，这意味着您可以查看文档Element并Node了解如何获取属性的值、遍历元素的直接子元素并使用 CSS 查询其子元素选择器等等。

于 2016-05-19T15:21:19.547 回答