gpt4 book ai didi

javascript - JS : Parse XML and update controls based on the nodes

转载 作者:行者123 更新时间:2023-11-29 20:53:25 25 4
gpt4 key购买 nike

我在面试中被问到这个问题。任务是在客户端解析 xml 并用其内容填充 html 页面。还要求不要使用 jQuery。

理想情况下,我什至不知道 XML 上有什么,而只是为其中的每个节点/元素添加一个标签。但是假设我确实知道 xml 的样子:

<?xml version="1.0" encoding="UTF-8"?> 
<cv>
<FirstName>David</FirstName>
<LastName>Refaeli</LastName>
<Jobs>Worst JS Programmer</Jobs>
</cv>

我的服务器端 html 是:

<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Height="185px" Width="279px"></asp:TextBox><br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return ParseXml();" /><br />
<br />
<asp:Label ID="FirstName" runat="server" Text=""></asp:Label><br />
<asp:Label ID="LastName" runat="server" Text=""></asp:Label><br />
<asp:Label ID="Jobs" runat="server" Text=""></asp:Label><br />
</div>
</form>
</body>
</html>

并假设文本框包含 xml。我已经为 xml 中的文本设置了占位符标签。

我尝试运行这个 JS(以及许多其他变体)但它失败了,并且在 VS 中调试它似乎没有找到原因(它确实突然将我弹出到一个 jQuery 文件中......)所以我猜我走错了路。

<script>
function ParseXml() {
var text = document.getElementById('<% = TextBox1.ClientID %>');
parser = new DOMParser();
xmlDoc = parser.parseFromString(text.textContent, "text/xml");
var a1 = xmlDoc.getElementsByTagName("cv")[0].childNodes[0].nodeValue;
var a2 = xmlDoc.getElementsByTagName("cv")[0].childNodes[1].nodeValue;
var a3 = xmlDoc.getElementsByTagName("cv")[0].childNodes[2].nodeValue;
document.getElementById('<% = FirstName.ClientID %>').textContent = a1;
document.getElementById('<% = LastName.ClientID %>').textContent = a2;
document.getElementById('<% = Jobs.ClientID %>').textContent = a3;
return true;
}
</script>

如有任何帮助,我们将不胜感激。

最佳答案

当函数返回 true 时,正在将表单发布到服务器,因此您将获得新表单并丢失所有 Javascript 更改。第一个更改是返回 false 以防止回发。然后我更改了从 xml 中检索文本的方式。

function ParseXml() {
var xml = document.getElementById('<% = TextBox1.ClientID %>').value;
var parser = new DOMParser();
xmlDoc = parser.parseFromString(xml, "text/xml");
var firstName = xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0].nodeValue;
var lastName = xmlDoc.getElementsByTagName("LastName")[0].childNodes[0].nodeValue;
var jobs = xmlDoc.getElementsByTagName("Jobs")[0].childNodes[0].nodeValue;
document.getElementById('<% = FirstName.ClientID %>').innerText = firstName;
document.getElementById('<% = LastName.ClientID %>').textContent = lastName;
document.getElementById('<% = Jobs.ClientID %>').textContent = jobs;
return false;
};

或者,如果您不知道 cv 标签中的字段,您可以这样做:

var tags = xmlDoc.getElementsByTagName("cv")[0].childNodes;
for (key in tags)
{
if (tags[key].nodeName.length) {
document.body.innerHTML += '<b>'
+ tags[key].nodeName + ':</b> '
+ tags[key].textContent + '<br />';
}
}

此外,我在您的 Aspx 中禁用了 ValidateRequest:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication14.WebForm2" ValidateRequest="false" %>

通过这些更改,代码应该能够像这样解析 xml:

<?xml version="1.0" encoding="UTF-8"?> 
<cv>
<FirstName>David</FirstName>
<LastName>Refaeli</LastName>
<Jobs>Worst JS Programmer</Jobs>
</cv>

在您的尝试中,xmlDoc.getElementsByTagName("cv")[0].childNodes[0].nodeValue 没有返回名字的原因是 childNodes包含额外的 text 节点,用于标签之间的空格和换行符。所以数组看起来像:

0:text, 1:firstname, 2:text, 3:lastname, 4:text, 5:jobs, 6:text

名字是第 1 项,而不是第 0 项。但是由于 xml 上只有一个 CV,所以我可以使用它进行访问:

xmlDoc.getElementsByTagName("FirstName")[0].childNodes[0].nodeValue;

关于javascript - JS : Parse XML and update controls based on the nodes,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50579901/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com