質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

xmlのデータをJavascriptで取り込みたい

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 4,785
退会済みユーザー

退会済みユーザー

「xmlファイルの値をHTMLに表示する」というシンプルな事をしたいのですが検索しても複雑なコードしか発見出来ず構文すら分からない状態です。

◆不明点
以下のxmlファイルの「<name="Emily">」の「Emily」を、

HTMLファイル「<div class = "name"><p id = "htmlId">Name</p></div>」のpタグ内「Name」に入れたいのですが構文が分かりません。。

test.xml

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<English>
<name="Emily">
</name>
</English>

Sample.html

<!DOCTYPE ~~~ >
<html>
<head>
~~
</head>
<body>
<div class = "name">**<p id = "">Name</p>**</div>
</body>
</html>


ajax.js

    function getXmlData() {
        var filePath = "test.xml";
        var data = new XMLHttpRequest();
        data.open("GET",filePath);
        data.send();

        data.onload = function(){ //読み込み完了時の実行内容
            var date = data.responseXML;
            var html = document.getElementById("htmlId"); //HTMLファイル内のid名(htmlId)を変数「html」に代入
            var xml = date.getElementsByTagName("name"); //XMLファイルのタグ「name」を変数「xml」に入れる
            html = xml; //HTMLにxml(タグ名「name」)を表示させたい
            };

jsファイルにXMLファイルのデータを取り込み、
取り込んだデータをHTMLに表示させる、といった処理を書いたつもりなのですが上手くいきません。(HTMLに何も表示されない)
恐らく何かが足りないのだと思うのですがそれが何かが分かりません。
XMLファイルのタグを指定する際に<name>タグは<English>タグの中に入っているから
getElementsByTagName("English")[0];と指定しなくてはならないでしょうか。
ご教示いただけますと助かります。
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2017/07/25 18:21

    kei344さんの回答とはどちらの回答でしょうか?kei344さんの回答「回答にて提示された「構文」は試されましたか?また、エラーの確認方法はわかりますか?」を試されましたかと質問されたと思ったのですが。

    キャンセル

  • Lhankor_Mhy

    2017/07/25 18:26

    「質問への追記・修正、ベストアンサー選択の依頼」欄と「回答」欄があり、いまやりとりをしているのは、「質問への追記・修正、ベストアンサー選択の依頼」欄です。teratailで「回答」と補足なしに書く場合は「回答」欄にある回答のことを指します。

    キャンセル

  • Lhankor_Mhy

    2017/07/25 18:29

    あら、いなくなっちゃったよ…… なんだったんだ一体……

    キャンセル

回答 2

+1

『jQuery+XMLを読み込む』でググるといろいろ出てきますね。
jquery で xml ファイルを読み込む | hacknote
jQueryでXMLの読み込み&出力をする

IE9以上条件であれば、jQueryのバージョンは1.x系にした方がいいと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/21 13:28

    あ、調べたら、3.x系でもIE9+の対応のようでした。失礼いたしました。

    キャンセル

  • 2017/07/22 10:44

    ありがとうございます。上記読んだのですが構文の意味が読み取れず・・。どこかのページで値表示だけであればfind()とtext()で出力できると知ったのですがそれを使用しての記述方法がイマイチ分からず失敗してしまいます。。

    キャンセル

+1

以下のようなエラーが出てしまいます。 jquery.min.js:4 XMLHttpRequest cannot load file:///Volumes/xxxxxx.heteml.jp/xml/text_Port.xml. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. send @ jquery.min.js:4 ajax @ jquery.min.js:4 getAjaxData @ ajax.js:23 loadAjax @ ajax.js:17 n @ jquery.min.js:2 fireWith @ jquery.min.js:2 ready @ jquery.min.js:2 B @ jquery.min.js:2

Chromeはローカルファイルを開いた状態(ファイルを選択してブラウザで表示)ではAjaxが機能しません。回避方法もありますが、サーバを用意するかFirefoxなど別のブラウザでテストするなどのほうが早いかもしれません。

【ローカル(file:///)上で外部ファイル読み込みのセキュリティ制約を回避するいくつかの方法 - Qiita】
http://qiita.com/nissuk/items/1ede2953a8661dc59214

【【解説付き】chromeでXMLHttpRequestをローカルのファイルで行う方法 - Qiita】
http://qiita.com/growsic/items/a919a7e2a665557d9cf4

【[*その他*] ChromeにてAjaxでローカルファイルにアクセス - Qiita】
http://qiita.com/cigalecigales/items/33afaa42f91542ffa62e

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る