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

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-05-16 15:06:55
オリジナル
1693 人が閲覧しました

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

$("<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 までご連絡ください。
最新の問題
jQueryファイルをインポートする
から 1970-01-01 08:00:00
0
0
0
jQueryのプロトタイプチェーン
から 1970-01-01 08:00:00
0
0
0
Nuxt.js に jQuery をインストールする手順
から 1970-01-01 08:00:00
0
0
0
php+jqueryの問題
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート