如何在循环的帮助下动态地从 xml 文件中获取表到 ajax？答案

【问题标题】：How can I fetch table from xml file to ajax dynamically with the help of loop?如何在循环的帮助下动态地从 xml 文件中获取表到 ajax？
【发布时间】：2021-12-24 02:06:50
【问题描述】：

我有这个 HTML，但我是手动完成的，我需要动态完成并在 ajax 中的 XMLHttpRequest 的帮助下从 XML 文件中获取数据。如何在一个函数中获取它并遍历 XML 文件的数据？

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        h1,
        tr,
        th {
            text-align: center;
        }

        button {
            background-color: white;
            border: 0px;
        }
    </style>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container col-sm-4">
        <h1 style="margin-bottom: 50px; text-align: center;">Ogrenciye tiklandiginda bilgilerin ekrana getirilmesi</h1>
        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th>Numara</th>
                    <th>AdSoyad</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><button>1111111</button></td>
                    <td><button>Dugu AKSEHIR</button></td>
                </tr>
                <tr>
                    <td><button>222222</button></td>
                    <td><button>Ayse CALISKAN</button></td>
                </tr>
                <tr>
                    <td><button>333333</button></td>
                    <td><button>Semih ARSLAN</button></td>
                </tr>
                <tr>
                    <td><button>444444</button></td>
                    <td><button>Mehemet ERKOC</button></td>
                </tr>
            </tbody>
        </table>
    </div>

</body>

</html>

我的xml文件是这样的：

<catalog>
    <student>
        <number>111111</number>
        <name>Dugu AKSEHIR</name>
        <sinif>3.sinif</sinif>
        <bolum>Bilgisayar Muhendisligi</bolum>
    </student>

    <student>
        <number>222222</number>
        <name>Dugu AKSEHIR</name>
        <sinif>2.sinif</sinif>
        <bolum>kimya Muhendisligi</bolum>
    </student>

    <student>
        <number>333333</number>
        <name>Semih ARSLAN</name>
        <sinif>1.sinif</sinif>
        <bolum>Harita Muhendisligi</bolum>
    </student>

    <student>
        <number>444444</number>
        <name>Mehemet ERKOC</name>
        <sinif>4.sinif</sinif>
        <bolum>Elektrik Muhendisligi</bolum>
    </student>
</catalog>

输出应该是这样的：

【问题讨论】：

标签： javascript html ajax xml

【解决方案1】：

您可以先读取整个文件，然后逐个遍历每个学生标签，您可以继续追加到正文中的表格。

        <div class="container">
        
        <table id="tableList" class="table col-xs-12  col-md-6"  >
            <thead class="thead-dark">
                <tr>
                    <th class="col-xs-6">Number</th>
                    <th class="col-xs-6">Name</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
            
        </table>
    
    </div>

 
<script>

    $( document ).ready(function (){
        readXml('File.xml');     
    });

function readXml(xmlFile){
       var xmlDoc;
       if(typeof window.DOMParser != "undefined") {
           xmlhttp=new XMLHttpRequest();
           xmlhttp.open("GET",xmlFile,false);
           if (xmlhttp.overrideMimeType){
               xmlhttp.overrideMimeType('text/xml');
           }
           xmlhttp.send();
           xmlDoc=xmlhttp.responseXML;
       }
       else{
           xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
           xmlDoc.async="false";
           xmlDoc.load(xmlFile);
       }
        var tableRowData;
       $('student',xmlDoc).each(function(i){
               var tagObj=$(this);
               var numValue = tagObj[0].getElementsByTagName("number")[0].childNodes[0].nodeValue;
               var nameValue = tagObj[0].getElementsByTagName("name")[0].childNodes[0].nodeValue;
               console.log(numValue +', '+ nameValue);   
                tableRowData = "<tr><td>"+ numValue +" </td> <td>"+ nameValue +" </td> </tr>";
                $("#tableList tbody").append(tableRowData);
       });
 }        
    
</script>

【讨论】：