ホームページ >ウェブフロントエンド >jsチュートリアル >XML_jquery を解析するための JQuery メソッドの概要

XML_jquery を解析するための JQuery メソッドの概要

WBOY
WBOYオリジナル
2016-05-16 15:06:551647ブラウズ

この記事の例は、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>

2 番目のオプション:

<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 文字列を解析する前に「b2a0af5a8fd26276da50279a1c63a57a」と「21118965b89073f60271ef4a3b5d3c58」で囲む必要があることに注意してください。

$("<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 プログラミングのすべての人に役立つことを願っています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。