如何在循环的帮助下动态地从 xml 文件中获取表到 ajax？
Posted
技术标签:
【中文标题】如何在循环的帮助下动态地从 xml 文件中获取表到 ajax？【英文标题】：How can I fetch table from xml file to ajax dynamically with the help of loop? 【发布时间】：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>
输出应该是这样的：
【问题讨论】：
【参考方案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>
【讨论】：
以上是关于如何在循环的帮助下动态地从 xml 文件中获取表到 ajax？的主要内容，如果未能解决你的问题，请参考以下文章