jquaryでxmlファイルの読み込み

更新日2011-03-09 (水) 14:28:47

データのxmlファイル(test3.xml)

<?xml version="1.0" encoding="UTF-8"?>
<readdata>
 <city name="桑名" lat="35.0569804313727" lng="136.682281494141">
  <kamoku data="">
   <byoumei name="インフルエンザ" kazu="319" />
  </kamoku>
  <kamoku data="小児科">
   <byoumei name="咽頭結膜熱" kazu="4" />
   <byoumei name="A群容レン菌咽頭炎" kazu="7" />
   <byoumei name="感染性胃腸炎" kazu="51" />
   <byoumei name="水痘" kazu="9" />
  </kamoku>
  <kamoku data="独自**">
   <byoumei name="マイコプラズマ肺炎" kazu="0" />
   <byoumei name="クラミジア肺炎" kazu="0" />
  </kamoku>
  <kamoku data="眼科">
   <byoumei name="急性出血性結膜炎" kazu="0" />
   <byoumei name="流行性角膜炎" kazu="0" />
  </kamoku>
 </city>
 <city name="四日市" lat="34.9579953108679" lng="136.6259765625">
  <kamoku data="">
   <byoumei name="インフルエンザ" kazu="301" />
  </kamoku>
  <kamoku data="小児科">
   <byoumei name="咽頭結膜熱" kazu="2" />
   <byoumei name="A群容レン菌咽頭炎" kazu="6" />
   <byoumei name="感染性胃腸炎" kazu="52" />

(略)

読み込みhtml

$(document).ready(function(){の中でdocument.writeを使用するとエラーするので注意 デバッグはwindow.alertを使用する

要素が階層構造の時は$(this).find("kamoku").each(function(){などdataTypeにthisを指定する。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
</head>
<body>

<script type="text/javascript">
//以下のfunctionはページを読み込んだ後に実行
$(document).ready(function(){
    $.ajax({
    url: 'test3.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('xmlファイルの読み込みに失敗しました');
    },
    success: function(xml){
        $(xml).find("city").each(function(){
            city = $(this).attr("name");
            lat  = $(this).attr("lat");
            lng  = $(this).attr("lng");
            window.alert("city: " + city + "(lat:" + lat + "lng:" + lng + ")")
            $(this).find("kamoku").each(function(){
              kamoku = $(this).attr("data");
//              window.alert("kamoku: " + kamoku);

              $(this).find("byoumei").each(function(){
                var tmpbyoumei = $(this).attr("name");
                var tmpkazu  = $(this).attr("kazu");
//                window.alert("byoumei:" + tmpbyoumei + "kazu:" + tmpkazu);
              });
           });
       });
     }
    });
});

</script>

2次元配列の宣言(データ数が既知の場合)

   kamoku = new Array(9);
   window.alert(kamoku.length);
   for ( i = 0 ; i < kamoku.length; i++){
      kamoku[i] = new Array(5);
   }

kamoku[1][2]として使用する。

PHPでPOST、GETした値の評価(セキュリティチェック)

htmlspecialchars() を必ず通す

SQLitesqlite_escape_string()
PostgreSQLpg_escape_string()
MySQLmysql_real_escape_string()(MySQL に接続した後で使う)

値をキャストする $x = (int) $x; や $x = (float) $x;


トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS