Как использовать JS для анализа xml в браузере Chrome и вывода в поле формы html? Мой скрипт работает на MS т.е. XML отображается в виде распечатанного исходного файла «http_myxml.xml». вывод html из JS в "document.display"
<?xml version = "1.0" ?>
<record>
<c_date>2022-11-21 07:22:10</cx_date>
<ev1_sup>1.22</ev1_sup>
</record>
var xml_data_URL = "http_myxml.xml";
var Polling;
var Ptr411Name = "c_date";
var Ptr52901Name = "ev1_sup";
var xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = true;
function GetData()
{
if (xml.readyState==4) // Is the load completed?
{
xml.load(xml_data_URL);
Polling = true;
}
setTimeout("GetData()",16000);
}
function DisplayData()
{
var xmlElements;
var svgElement;
// Check for XML file update
if (!Polling) return;
if (xml.readyState==4) // Is the load completed?
{
Polling = false;
var err = xml.parseError;
if (err.errorCode == 0)
{
// update form fields
xmlElements = xml.getElementsByTagName(Ptr411Name);
document.display.c_date.value=xmlElements.item(0).text;
xmlElements = xml.getElementsByTagName(Ptr52901Name);
document.display.ev1_sup.value=xmlElements.item(0).text;
if (xmlElements.item(0).text == 0)
window.status = "x";
}
else
{
alert("advice: xml data load timed out: "+err.reason);
}
}
setTimeout("DisplayData()",8000);
}
<html>
<form action = "" name = "display" method = "post"><input class = "o" size = "26" readonly name = "c_date"><input class = "o" size = "26" readonly name = "ev1_sup"></form>
</html>
Этот код работает, т.е. браузер отображает данные xmlelement c_date и ev1_sup в соответствующих полях html-формы. Как заставить это работать для Chrome?
В этом примере я загружаю XML-документ:
<?xml version = "1.0" encoding = "UTF-8"?>
<fields>
<field type = "text" name = "title"/>
<field type = "text" name = "description"/>
</fields>
Для загрузки XML-документа я использую fetch API. Например, я заменил реальный URL-адрес URL-адресом данных, чтобы показать, что это работает здесь, на ST.
var xml_data_URL = 'data:application/xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPGZpZWxkcz4KPGZpZWxkIHR5cGU9InRleHQiIG5hbWU9InRpdGxlIi8+CjxmaWVsZCB0eXBlPSJ0ZXh0IiBuYW1lPSJkZXNjcmlwdGlvbiIvPgo8L2ZpZWxkcz4=';
document.addEventListener('DOMContentLoaded', e => {
fetch(xml_data_URL).then(res => res.text()).then(text => {
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(text, "application/xml");
[...xmlDoc.documentElement.children].forEach(node => {
let type = node.getAttribute('typw');
let name = node.getAttribute('name');
document.forms.form01.innerHTML += `<label>${name}: <input type = "${type}"
name = "${name}"></label>`;
});
});
});
<form name = "form01"></form>
На основе XML-документа:
<?xml version = "1.0" encoding = "UTF-8"?>
<record>
<c_date>2022-11-21 07:22:10</c_date>
<ev1_sup>1.22</ev1_sup>
</record>
Следующий пример — зацикливание дочерних элементов XML-документа. Для каждого элемента он выбирает элемент формы с тем же именем и вставляет textContent.
var xml_data_URL = 'data:application/xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHJlY29yZD4KPGNfZGF0ZT4yMDIyLTExLTIxIDA3OjIyOjEwPC9jX2RhdGU+CjxldjFfc3VwPjEuMjI8L2V2MV9zdXA+CjwvcmVjb3JkPg==';
document.addEventListener('DOMContentLoaded', e => {
fetch(xml_data_URL).then(res => res.text()).then(text => {
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(text, "application/xml");
[...xmlDoc.documentElement.children].forEach(node => {
document.forms.display[node.nodeName].value = node.textContent;
});
});
});
<form action = "" name = "display" method = "post">
<input type = "text" class = "o" size = "26" readonly name = "c_date">
<input type = "text" class = "o" size = "26" readonly name = "ev1_sup">
</form>
Спасибо, чрваль. Я включил свой образец xml. мой сценарий устанавливает переменные для значений, заключенных в теги элементов xml, и значения затем отображаются как значения в элементах ввода объекта формы html с именем «отображение» (document.display). Кажется, я не могу заставить его работать так, как мне нужно, однако ваш скрипт отлично работает на моем сервере.
@LarsJohansen Я обновил свой ответ вторым примером, в котором я использую ваш XML-документ.
Еще раз спасибо chrwahl. Фактическое получение данных xml из удаленной системы занимает несколько секунд, поэтому время ожидания установлено на 16000. Я не могу заставить интервал времени ожидания работать с вашим сценарием.
Не могли бы вы добавить некоторые из ваших XML к вашему вопросу.