지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 백엔드 개발 > XML/RSS 튜토리얼 > xml 학습(3) html 디스플레이 xml

xml 학습(3) html 디스플레이 xml

黄舟
풀어 주다： 2017-02-23 14:33:05
원래의
2100명이 탐색했습니다.


有的时候我们需要在html显示xml，比如我们修改了xml,点击保存，需要在页面显示xml源码，让我们知道xml已经修改了，最好的方法是把xml放到pre元素中，但是会发现没有换行，全部显示一行，肯定很难看，所以我做了一个迭代xmlDOM的函数来格式显示xml的函数，

  迭代函数思路：

1.每个xml文件时有无数个兄弟节点组成，但是终有最后截止的一个，那么循环结束的标志就是当一个节点没有兄弟节点时，循环就结束，

那么可以循环兄弟节点，于是有循环兄弟节点函数

2每个节点可能有子节点，子节点也可能有兄弟子节点，这个时候利用循环兄弟节点函数，循环节点的第一个子节点，

效果图：

主要代码：

   private void getXMLStr(XmlDocument xmlDoc)
    {
        foreach (XmlNode node in xmlDoc.ChildNodes)
        {

            if (node.NodeType == XmlNodeType.Element)
            {
                getNext(node,0);
            }
            else 
            {
                xml = "<p>" + node.OuterXml.Replace("<","<").Replace(">",">");
            }


        }
    }


    private void getNext(XmlNode node,int i)
    {
        if (node.NextSibling == null)//如果没有兄弟节点
        {
            if (node.HasChildNodes)
            {
                //如果有子节点
                if (node.FirstChild.NodeType != XmlNodeType.Text)
                {
                    //getXmlAttribute(node)  获取节点的所有属性
                    //如果子节点的子节点不是text类型
                    xml = xml + "<p " + "style=&#39;margin-left:" + (i * 20).ToString() + "px&#39;  ><" + node.Name +"  "+ getXmlAttribute(node) + "></p>";
                    getNext(node.FirstChild, i + 1);
                    xml = xml + "<p " + "style=&#39;margin-left:" + (i * 20).ToString() + "px&#39;  ></"+ node.Name +"></p>";
                }
                else
                {
                    //如果子节点的子节点不是text类型
                    xml = xml + "<p " + "style=&#39;margin-left:" + (i * 20).ToString() + "px&#39;  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</p>";
 
                }
            }
            else  
            {
                xml = xml + "<p " + "style=&#39;margin-left:" + (i * 20).ToString() + "px&#39;  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</p>";
            }
        }
        else
        {
            if (node.HasChildNodes)
            {
                if (node.FirstChild.NodeType != XmlNodeType.Text)
                {

                    xml = xml + "<p " + "style=&#39;margin-left:" + (i * 20).ToString() + "px&#39;  ><" + node.Name+"  " + getXmlAttribute(node) + "></p>";
                    getNext(node.FirstChild, i + 1);
                    xml = xml + "<p " + "style=&#39;margin-left:" + (i * 20).ToString() + "px&#39;  ></"+ node.Name  + "></p>";
                }
                else
                {
                    xml = xml + "<p " + "style=&#39;margin-left:" + (i * 20).ToString() + "px&#39;  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</p>";
                }
            }
            else
            {
                xml = xml + "<p " + "style=&#39;margin-left:" + (i*20).ToString() + "px&#39;  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</p>";
            }
            getNext(node.NextSibling,i);

        }

    }


    private string  getXmlAttribute(XmlNode node)
    {
        string rtn=string.Empty;
        foreach (XmlAttribute attr in node.Attributes)
        {
            rtn +="  "+ attr.Name + "=" + attr.Value;
        }
        return rtn;
    }
로그인 후 복사


源码：

showXML.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="showXML.aspx.cs" Inherits="showXML" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>读取xml</title>
  
    <link rel="Stylesheet" type="text/css" href="Css/Common/InputStyle.css" />
    <script type="text/javascript"  src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        function showXml() {
            $.ajax({
                url: &#39;showXML.aspx?action=create&rnd&#39; + Math.random(),
                type: &#39;post&#39;,
                cache: false,
                async: false,
                success: function (result) {
                    if (result != &#39;&#39;) {
                        result = result.toString();
                        $("#pre_xml").show().html(&#39;&#39;).append(result);
                    }
                    else {
                        alert(&#39;读取数据失败！&#39;);
                    }
                }
            });
        }

        $(document).ready(function () {
            showXml();
        });



        function hideXml() {
            $("#pre_xml").hide();
        }
    </script>


   

</head>
<body>
    <form id="form1" runat="server">
    <p>
    <p class="main">
      <p class="button">
        <table width="100%">
          <tr>
            <td>
              <input type="button" id="btn_show" class="two-bu" onclick="showXml();" value="显示"/>
               <input type="button" id="btn_hide" class="two-bu" onclick="hideXml();" value="隐藏"/>
            </td>
          </tr>
        </table>
      </p>
      <p >
       <pre id="pre_xml"  style=" background-color:#A8B7CC; width:500px;"  >

로그인 후 복사



showXML.aspx.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Xml;
using System.Web.UI.HtmlControls;

public partial class showXML : System.Web.UI.Page
{

    public  string xml = string.Empty;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
        }
        if (Request.QueryString["action"] != null && Request.QueryString["action"].ToString() != "")
        {
            switch (Request.QueryString["action"].ToString())
            {
                case "create":
                    Response.Clear();
                    Response.Write(showXml());
                    Response.End();
                    break;
                default:
                    break;

            }
        }


    }


    /// 
    /// 在html显示xml
    /// 
    /// 文件名字
    private string showXml()
    {
        string rtn = string.Empty;
        string path = Server.MapPath("Xml\\") + "示例_创建" + ".xml"; //xml文件路径
        if (File.Exists(path))
        {
            XmlTextReader xmlRead = new XmlTextReader(path);//xml只读类
            XmlDocument xmlDoc = new XmlDocument();
            xmlDoc.Load(xmlRead);

            xmlRead.Close();
            getXMLStr(xmlDoc);
            rtn = xml;
        }
        return rtn;

    }


    private void getXMLStr(XmlDocument xmlDoc)
    {
        foreach (XmlNode node in xmlDoc.ChildNodes)
        {

            if (node.NodeType == XmlNodeType.Element)
            {
                getNext(node,0);
            }
            else 
            {
                xml = "<p>" + node.OuterXml.Replace("<","<").Replace(">",">");
            }


        }
    }


    private void getNext(XmlNode node,int i)
    {
        if (node.NextSibling == null)//如果没有兄弟节点
        {
            if (node.HasChildNodes)
            {
                //如果有子节点
                if (node.FirstChild.NodeType != XmlNodeType.Text)
                {
                    //getXmlAttribute(node)  获取节点的所有属性
                    //如果子节点的子节点不是text类型
                    xml = xml + "<p " + "style=&#39;margin-left:" + (i * 20).ToString() + "px&#39;  ><" + node.Name +"  "+ getXmlAttribute(node) + "></p>";
                    getNext(node.FirstChild, i + 1);
                    xml = xml + "<p " + "style=&#39;margin-left:" + (i * 20).ToString() + "px&#39;  ></"+ node.Name +"></p>";
                }
                else
                {
                    //如果子节点的子节点不是text类型
                    xml = xml + "<p " + "style=&#39;margin-left:" + (i * 20).ToString() + "px&#39;  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</p>";
 
                }
            }
            else  
            {
                xml = xml + "<p " + "style=&#39;margin-left:" + (i * 20).ToString() + "px&#39;  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</p>";
            }
        }
        else
        {
            if (node.HasChildNodes)
            {
                if (node.FirstChild.NodeType != XmlNodeType.Text)
                {

                    xml = xml + "<p " + "style=&#39;margin-left:" + (i * 20).ToString() + "px&#39;  ><" + node.Name+"  " + getXmlAttribute(node) + "></p>";
                    getNext(node.FirstChild, i + 1);
                    xml = xml + "<p " + "style=&#39;margin-left:" + (i * 20).ToString() + "px&#39;  ></"+ node.Name  + "></p>";
                }
                else
                {
                    xml = xml + "<p " + "style=&#39;margin-left:" + (i * 20).ToString() + "px&#39;  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</p>";
                }
            }
            else
            {
                xml = xml + "<p " + "style=&#39;margin-left:" + (i*20).ToString() + "px&#39;  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</p>";
            }
            getNext(node.NextSibling,i);

        }

    }


    private string  getXmlAttribute(XmlNode node)
    {
        string rtn=string.Empty;
        foreach (XmlAttribute attr in node.Attributes)
        {
            rtn +="  "+ attr.Name + "=" + attr.Value;
        }
        return rtn;
    }

}
로그인 후 복사



示例_创建.xml源码

注意：xml路径与后天获取的xml的路径要一致，我的路径是程序根目录xml文件夹下

示例_创建.xml源码


<?xml version="1.0" encoding="utf-8" ?>
<catalog  name="测试" >
    <cd >
        <title>11</title>
        <artist>12</artist>
        <country>13</country>
        <company>14</company>
        <price>15</price>
        <year>16</year>
    </cd>
    <cd>
        <title>21</title>
        <artist>22</artist>
        <country>23</country>
        <company>24</company>
        <price>25</price>
        <year>26</year>
    </cd>
  
  </catalog>
로그인 후 복사



 以上就是xml学习（3） html显示xml的内容，更多相关内容请关注PHP中文网（www.php.cn）！ 

  

관련 라벨：
xml，html
원천：php.cn
이전 기사：xml 학습(2) xml 문서 트리 구조도 다음 기사：xml 학습 (4) xml 파일 생성
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PX가 REM 오류로 자동 변환  <style>html {   글꼴 크기: calc(100vw / 3.75);      }body {    글꼴 크기: 0.16rem;      }&l...
에서 2024-04-16 09:34:16
0
0
4687
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
문자열을 HTML 코드(배열에서 생성됨)로 바꾸는 최상위 방법 다음과 같은 문자열이 주어지면...$htmlPattern="Usernameis:#name#andusercompanyis#company#";하위 ...
에서 2024-04-06 17:40:41
0
2
410
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿