繁体   English   中英

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

[英]HTML Form Input Fields to read and write XML file

我目前正在尝试使用输入字段构建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可以顺利通过,因为siteCollection范围项目有效,但输入字段无效。

任何帮助将非常感激。

谢谢。

也许如果您使用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>

感谢大德使我走上正确的道路。 我找到了将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>
<!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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM