XML_jquery 구문 분석을 위한 JQuery 메서드 요약

이 기사의 예에는 JQuery에서 XML을 구문 분석하는 방법이 요약되어 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

JavaScript를 사용하여 XML 데이터를 구문 분석하는 것은 일반적인 프로그래밍 작업입니다. JavaScript가 이를 수행할 수 있다면 JQuery도 확실히 그렇게 할 수 있습니다. JQuery를 사용하여 XML을 구문 분석하는 몇 가지 예를 요약해 보겠습니다.

첫 번째 옵션:

<script type="text/javascript">
$(document).ready(function() {
  $.ajax({
     url: 'http://localhost/cgi/test.xml',
     dataType: 'xml',
     success: function(data){
       //console.log(data);
       $(data).find("channel").find("item").each(function(index, ele) {
        var titles = $(ele).find("title").text();
        var links = $(ele).find("link").text();
        console.log(titles+'-----');
        $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>');
      });
    }
  });
})
</script>
<div id="noticecon">
  <ol>
  </ol>
</div>

두 번째 옵션:

<script type="text/javascript">
  $.get("http://localhost/cgi/test.xml", function(data){
    $(data).find('channel').find('item').each(function(index, ele){
      var titles = $(ele).find('title').text();
      var links = $(ele).find('link').text();
      $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>');
    })
  });
</script>
<div id="noticecon">
  <ol>
  </ol>
</div>

일반적인 단계는 다음과 같습니다.

1.XML 파일 읽기

$.get("xmlfile.xml",function(xml){
  //xml即为可以读取使用的内容，具体读取见第2点
});

2. XML 콘텐츠 읽기

xml 읽기가 xml 파일에서 오는 경우 위 사항과 결합하여 처리는 다음과 같습니다.

$.get("xmlfile.xml",function(xml){ 
  $(xml).find("item").length; 
});

xml 문자열을 읽는 경우 xml 문자열을 구문 분석하기 전에 "" 및 ""로 묶어야 합니다.

$("<xml><root><item></item></root></xml>").find("item").length;

xml 콘텐츠 구문 분석:

샘플 xml:

<&#63;xml version="1.0" encoding="utf-8" &#63;>
<fields>
 <field Name="Name1">
 <fieldname>dsname</fieldname>
 <datatype>字符</datatype>
 </field>
 <field Name="Name2">
 <fieldname>dstype</fieldname>
 <datatype>字符</datatype>
 </field>
</fields>

파싱 샘플 코드는 다음과 같습니다.

$(xml).find("field").each(function() {
  var field = $(this);
  var fName = field.attr("Name");//读取节点属性
  var dataType = field.find("datatype").text();//读取子节点的值
});

더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자는 이 사이트에서 특별한 주제를 확인할 수 있습니다: "jQuery 작업 xml 기술 요약", "jQuery 드래그 효과 및 기술 요약", " JQuery 확장 기술 요약", "jQuery 일반 클래식 특수 효과 요약", "jQuery 애니메이션 및 특수 효과 사용 요약", jquery 선택기 사용 요약 " 및 "일반적인 jQuery 플러그인 및 사용 요약"

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.