jQuery_jquery에서 XML 데이터를 처리하는 일반적인 방법

XML은 Extensible Markup Language의 약자입니다. 파일 구조는 HTML과 유사하지만 차이점도 분명합니다. HTML은 제목, 본문, 범위 등 정의된 태그만 사용할 수 있습니다. 태그 유형은 제한되어 있지만 XML 제외 HTML 태그를 모두 사용할 수 있으며, 사람, 이름, 성별, 나이 등 태그를 임의로 사용자 정의할 수도 있으며, XML의 태그 속성 이름도 임의로 사용자 정의할 수 있습니다. 또한 HTML은 주로 데이터를 표시하는 데 사용되는 반면 XML은 데이터의 저장 및 전송에 중점을 둡니다. 예를 들어 직원 정보를 저장하는 데 다음과 같은 간단한 XML 문서가 사용됩니다.

<员工>
 <姓名>麻花疼</姓名>
 <性别>男</性别>
 <年龄>40</年龄>
 <职位>疼逊CEO</职位>
</员工>

다음 기사에서는 jQuery를 사용하여 XML 파일을 로드하고 이 파일에서 원하는 데이터를 얻는 방법을 간략하게 소개합니다.
XML 문서 및 테스트 데이터 준비

이제 인사 정보가 포함된 XML 문서를 작성한다고 가정해 보겠습니다. XML 문서에는 그의 이름, 회사, 회사 프로필 및 회사 제품 프로필이 반영되어야 합니다. 그러면 XML을 다음과 같은 스타일로 디자인할 수 있습니다.

<&#63;xml version="1.0" encoding="utf-8" &#63;>
<Persons>
 <Person FullName="Bill Gates">
 <Corporation>Microsoft</Corporation>
 <Description>The largest software company</Description>
 <Products>Windows series OS, SQL Server Database, XBox 360...</Products>
 </Person>

 <Person FullName="Jobs">
 <Corporation>Apple</Corporation>
 <Description>The famous software company</Description>
 <Products>Macintosh, iPhone, iPod, iPad...</Products>
 </Person>

 <Person FullName="Larry Page">
 <Corporation>Google</Corporation>
 <Description>the largest search engine</Description>
 <Products>Google search, Google Adsense, Gmail...</Products>
 </Person>
</Persons>

이 XML 파일에 대한 간략한 분석을 보면 첫 번째 줄 acc4d1da796cf06af74ab661ff64549a은 이 문서가 XML 문서이고 텍스트 인코딩이 utf-8임을 선언합니다. . Persons의 두 번째이자 마지막 행은 문서의 루트 요소이며 각 Person 요소는 각 사람을 나타냅니다. 이름은 Person 요소의 FullName 속성에 저장되고 Corporation 요소는 회사 이름을 저장하는 데 사용됩니다. Description 요소는 회사 프로필을 저장하는 데 사용됩니다. Products 요소는 회사 제품 프로필을 저장하는 데 사용됩니다. 지금까지 이 문서에는 IT 업계의 거물 세 명인 빌 게이츠, 스티브 잡스, 래리 페이지에 대한 정보가 포함되어 있습니다.

jQuery를 사용하여 이 XML 문서를 구문 분석하세요

먼저 $.get() 메서드를 사용하여 XML 파일을 로드한 다음 find() 메서드를 사용하여 모든 Person 요소를 찾은 다음 Each() 메서드를 사용하여 탐색합니다.

<script type="text/javascript">
jQuery(document).ready(function() {
 /* 先用 $.get 方法载入 XML 文件 */
 $.get("EmployeesInformation.xml", function(xmlData) {
 /* 我们要讲得到的数据放入一个表格里面，这里定义一个表格字符窜 */
 var htmlData = "<table border='1'>";

 /* 找到 Person 元素，然后用 each 方法进行遍历 */
 $(xmlData).find("Person").each(function() {
  var Person = $(this); /* 将当前元素复制给 Person */
  var FullName = Person.attr("FullName"); /* 获取 Person 的 FullName 属性 */
  var Corporation = Person.find("Corporation").text(); /* 获取 Person 中子元素 Corporation 的值 */
  var Description = Person.find("Description").text(); /* 获取 Person 中子元素 Description 的值 */
  var Products = Person.find("Products").text(); /* 获取 Person 中子元素 Products 的值 */

  /* 将得到的数据，放到表格的一行中 */
  htmlData += "<tr>";
  htmlData += " <td>" + FullName + "</td>";
  htmlData += " <td>" + Corporation + "</td>";
  htmlData += " <td>" + Description + "</td>";
  htmlData += " <td>" + Products + "</td>";
  htmlData += "</tr>";
 });
 
 //完成表格字符窜
 htmlData += "</table>";
 //将表格放到 body 中
 $("body").append(htmlData);
 });
});
</script>

이 코드를 간략히 설명하자면 이 XML 문서는 비교적 간단하기 때문에 코드 내 $.get() 메소드의 첫 번째 매개변수는 XML 파일 주소이고 두 번째 매개변수는 콜백입니다. .함수에서 콜백 함수의 xmlData 매개변수는 XML 파일의 데이터입니다. 이 예에서는 XML의 데이터를 HTML에 테이블로 표시하려고 하므로 먼저 테이블 문자열 htmlData를 빌드합니다.

다음으로, 각 Person 요소가 사람을 나타내기 때문에 find() 메서드를 사용하여 Person이라는 이름의 모든 요소를 ​​찾은 다음, Each() 메서드를 사용하여 순회하고 순회된 요소를 Person 변수에 할당합니다. Person.attr() 메소드를 사용하여 사람의 이름인 요소의 FullName 속성을 제거한 다음 find() 메소드를 사용하여 해당 하위 요소인 Corporation, Description 및 Products를 찾고 해당 텍스트 콘텐츠를 반환한 후 다음을 사용합니다. tr 및 td 태그를 사용하여 테이블 행 내부에 래핑합니다. 마지막으로 테이블 문자열을 완성하고 테이블을 body 태그에 추가합니다.