使用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 。