使用XML更改表单语言

Question

我的页面上方显示一个带有4个链接的表单，其中包含以下语言：英语，法语，意大利语和德语。 当用户单击链接之一时，表单标签的语言应更改为该特定语言。 四种语言都存储在XML文件中，但是由于我从未使用过XML，因此我不知道如何调用它们。 我做了一个类似的项目，我不得不使用“ .txt”文件来更改表单语言，但我设法使其正常工作。 下面的代码是如何使文本文件工作的，但是如何通过XML文件更改语言？

用于更改文本文件的Javascript代码

var request;
function init() {
var language = document.getElementsByTagName("a");
for (var i = 0; i < language.length; i++) {
    language[i].onclick = processRequest;
}
}

function processRequest(e) {
evt = e || window.event;
target = evt.target || evt.srcElement;
request = new XMLHttpRequest();
request.onreadystatechange = displayData;
request.open('GET', target.id + ".txt", true);
request.send(null);
}

function displayData() {
if (request.readyState == 4 && request.status == 200) {
    var fields = request.responseText.split(",");
    var labels = document.getElementsByTagName("label");
    for (var i = 0; i < labels.length; i++) {
        labels[i].innerText = fields[i];
    }
}
}


window.onload = init();

我的XML档案

<LANGUAGES>
<english>
    <FIELD>First Name:</FIELD>
    <FIELD>Last Name:</FIELD>
    <FIELD>Address 1:</FIELD>
    <FIELD>Address 2</FIELD>
    <FIELD>City:</FIELD>
    <FIELD>Province:</FIELD>
    <FIELD>Postal Code:</FIELD>
    <FIELD>Visited:</FIELD>
</english>
<francais>
    <FIELD>Prenom:</FIELD>
    <FIELD>Nom de Famille:</FIELD>
    <FIELD>Adresse 1:</FIELD>
    <FIELD>Adresse 2:</FIELD>
    <FIELD>Ville:</FIELD>
    <FIELD>Province:</FIELD>
    <FIELD>Code Postal:</FIELD>
    <FIELD>Visite:</FIELD>
</francais> 
<italiano>
    <FIELD>Primo Nome:</FIELD>
    <FIELD>Cognome:</FIELD>
    <FIELD>Indirizzo 1:</FIELD>
    <FIELD>Indirizzo 2:</FIELD>
    <FIELD>Citta:</FIELD>
    <FIELD>Province:</FIELD>
    <FIELD>Codice Postale:</FIELD>
    <FIELD>Visitato:</FIELD>
</italiano>
<deutsche>  
    <FIELD>Vorname:</FIELD>
    <FIELD>Nachname:</FIELD>
    <FIELD>Adresse 1:</FIELD>
    <FIELD>Adresse 2:</FIELD>
    <FIELD>Stadt:</FIELD>
    <FIELD>Provinz:</FIELD>
    <FIELD>Postleitzahl:</FIELD>
    <FIELD>Besucht:</FIELD>
</deutsche>
</LANGUAGES>

的HTML

<header>
        <span>&nbsp;</span>
        <ul id="languageChoice">
            <li class="rb"><a name="deutsche" id="deutsche">Deutsche</a></li>
            <li class="rb"><a name="italiano" id="italiano">Italiano</a></li>
            <li class="rb"><a name="Francais" id="francais">Francais</a></li>
            <li class="rb"><a name="English" id="english">English</a></li>
        </ul>
    </header>
    <section>
        <form method="get" action="" id="add1">
            <fieldset>
                <table>
                    <tr>
                        <td class = "field"><label for="firstName">First Name:</label></td>
                        <td><input id="firstName" size=10 name="firstName"></td>
                    </tr>

                    <tr>
                        <td class = "field"><label for="lastname">Last Name:</label></td>
                        <td><input id="lastName" size=15 name="lastName"></td>
                    </tr>

                    <tr>
                        <td class = "field"><label  for="address1">Address 1:</label></td>
                        <td><input id="address1" size=25 name="address1"></td>
                    </tr>

                    <tr>
                        <td class = "field"><label for="address2">Address 2:</label></td>
                        <td><input id="address2" size=25 name="address2"></td>
                    </tr>

                    <tr>
                        <td class = "field"><label for="city">City:</label></td>
                        <td><input id="city" size=20 name="city"></td>
                    </tr>

                    <tr>
                        <td class = "field"><label for="province">Province:</label></td>
                        <td><input id="province" size=20 name="province"></td>
                    </tr>

                    <tr>
                        <td class = "field"><label for="postalCode">Postal Code:</label></td>
                        <td><input id="postalCode" size=7 name="postalCode"></td>
                    </tr>
                    <tr>
                        <td class = "field"><label for="counter">Visited:</label></td>
                        <td><input id="counter" size=7 name="counter" disabled="yes"></td>
                    </tr>
                    <tr>
                        <td colspan=2><input type="submit" value="send" ></td>
                    </tr>
                </table>
            </fieldset>
        </form>
    </section>

Answer 1

您可以使用domParser加载XML，该XML将其转换为DOM文档。 之后，您可以将其视为常规DOM文档，并使用诸如getElementsByTagName之类的方法来获取您选择的语言。 例：

if (window.DOMParser) {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(xml,"text/xml");
} else {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.loadXML(xml); 
}

console.log(xmlDoc.getElementsByTagName('english')[0].children);

将返回english标签中的元素列表：

这是一个小提琴： http : //jsfiddle.net/jorgthuijls/M7mZ4/1/运行它并检查您的控制台。

使用它，循环浏览表单的标签并更新innerText 。