Question

我目前正在尝试构建一个带有输入字段的HTML表单来读取XML文件并回写更改。第一步是将页面加载的值检索到输入字段中，但它不想工作

    <body>
<h1>Config Page</h1>
<div>
    <b>Site URL:</b> <input type="text" id="siteURL" value="site..."/></span><br>
    <b>Site Collection:</b> <span id="siteCollection"></span><br>
</div>

<script>
        var xmlhttp, xmlDoc;
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "/Configuration/config.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;
        document.getElement
        document.getElementById("siteURL").value.innerHTML =
        xmlDoc.getElementsByTagName("siteURL")[0].childNodes[0].nodeValue;
        document.getElementById("siteCollection").innerHTML =
        xmlDoc.getElementsByTagName("siteCollection")[0].childNodes[0].nodeValue;
        function myFunction() {
            alert(siteURL + "is the site Url")
    }
</script>
<button onclick="myFunction()">Get message value</button>

我知道XML正在通过ok，因为siteCollection span项目有效，但输入字段没有。

非常感谢任何帮助。

谢谢。

Answer 1

也许如果你使用jQuery，你可以按照以下方式执行

http://codepen.io/Daethe/pen/dXWjJo

<div>
    <b>Site URL:</b> <input type="text" id="siteURL" value="site..."/></span><br>
</div>
<button onclick="myFunction()">Get message value</button>
<script>
  function myFunction() {
  var xmlHttp = jQuery.parseXML('<?xml version="1.0" encoding="utf-8"?><config><siteURL>http://localhost/</siteURL></config>');
  var xmlDoc;
  xmlDoc = xmlHttp.documentElement;
  $("#siteURL").val(xmlDoc.getElementsByTagName("siteURL")[0].childNodes[0].nodeValue);
}
</script>

Answer 2

感谢Daethe让我走上正轨。我发现我的解决方案是将xml文件读入HTML输入字段表单

用于javascript ...

var xmlpath = "../configuration/test.xml"
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", xmlpath, false);
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send("");
xmlDoc = xmlhttp.responseXML;

function loadFunction() {
$("#siteURL").val(xmlDoc.getElementsByTagName("siteURL")[0].childNodes[0].nodeValue);
}

对于页面......

    <script src="/Script/form.js"></script>
<link rel="stylesheet"     href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
                <html>
<br>Site URL (EG: http://intranet)</br>
                <input type="text" id="siteURL" name="siteURL" value="blank..." />
<button onclick="loadFunction()">Load Configuration</button>
</html>

Answer 3

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<title>Please Check Data</title>
<script type="text/javascript">
    function readXMLFile() {
        var i;
        var xml = new XMLHttpRequest();
        xml.open('GET', 'projectRelatedData.xml', false);
        xml.send();
        var xmlData = xml.responseXML;
            xmlData=(new DOMParser()).parseFromString(xml.responseText,'text/xml');
        var projectData=xmlData.getElementsByTagName("project");
        //alert(projectData.length);
        for(i=0;i<projectData.length;i++)
            {
        var name=projectData[i].getElementsByTagName("name")[0].firstChild.data;
        var imageName=projectData[i].getElementsByTagName("imagePath")[0].firstChild.data;
        var pdfName=projectData[i].getElementsByTagName("pdfPath")[0].firstChild.data;
        var description=projectData[i].getElementsByTagName("description")[0].firstChild.data;
        var amount=projectData[i].getElementsByTagName("amount")[0].firstChild.data;
        //alert("number of Project : "+projectData.length);
        document.write(name+'<br>');
        document.write(imageName+'<br>');
        document.write(pdfName+'<br>');
        document.write(description+'<br>');
        document.write(amount+'<br>');
            }
    }
</script>
</head>
<body>
    <button onclick="readXMLFile()">Click</button>
    <p id="ccc"></p>
</body>
</html>



<?xml version="1.0" encoding="UTF-8"?>
<projectWebsite>
    <project>
        <name>CARGO SHIPPING</name>
        <imagePath>CARGOSHIPPING.PNG</imagePath>
        <pdfPath>cargoShipping.pdf</pdfPath>
        <description>
        Cargo shipping is all about booking cargo to move from one place to another. Owner can add new shipsand he can also track ships.User can register for cargo and he can also track ships.Admin has the right to view detailsof owner, to add a new company and also update price of ship. This software hasa very nice GUI to give a very nice presentation of a cargo management system.
        </description>
        <amount>4000</amount>
    </project>
    <project>
        <name>E-BAZZAR</name>
        <imagePath>ebazzar.PNG</imagePath>
        <pdfPath>eBazar.pdf</pdfPath>
        <description>
        This project emphasizes on taking bookings of pat ient in a web portal system.Patient can search for the doctor and book for appointment . Doctor can check and confirm appointment so patient can visit accordingly.Also admin is provided to add doctors in the portal,moreover customer list can be seen as well.
        </description>
        <amount>4000</amount>
    </project>
</projectWebsite>

HTML表单输入字段用于读取和写入XML文件

3 个答案: