質問編集履歴｜teratail（テラテイル）

4 XMLファイル、jsファイル修正、追記

退会済みユーザー

2017/07/25 17:07 投稿

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

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

◆不明点

以下のxmlファイルの「<~~person~~ name="**Emily**">」の「**Emily**」を、

以下のxmlファイルの「<name="**Emily**">」の「**Emily**」を、

HTMLファイル「<div class = "name"><p>**Name**</p></div>」のpタグ内の「**Name**」に入れたいのですが

構文が分かりません。。

恐らくjsファイルが間違っていると思うのですが検索しても答えが見つからず困っています。

jsファイル内**outputSuccess()**内の処理が特に分かりません。

var txt = $(name).find('person name').text();

↑の、「$()」に入るのはhtmlのクラス名、「find()」に入るのはxmlのタグ名、

という認識がまず間違っていますか？

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

↓**test.xml**

```

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

<~~ramen~~>

<~~person~~ name="Emily">

</~~person~~>

</~~ramen~~>

<name="Emily">

</name>

</English>

```

↓**Sample.html**

```

<!DOCTYPE ～～～ >

<html>

<head>

～～

</head>

<body>

</body>

</html>

```

↓**ajax.js**

```

xmlPath="../xml/test.xml";

nameOutput = '.name'

$(document).ready(loadAjax);

function loadAjax(){

getAjaxData();

}

/*

jQuery xmlリクエスト

----------------------------------------------------------------------*/

function getAjaxData(){

$.ajax({

url:xmlPath,

success:outputSuccess

});

}

/*getAjaxData ／ success時処理

----------------------------------------------------------------------*/

function outputSuccess(){

var txt = $(name).find('person name').text();

$(nameOutput).text(txt);

}

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];__と指定しなくてはならないでしょうか。

ご教示いただけますと助かります。

よろしくお願いいたします。

JavaScript

22746 questions

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

XML

802 questions

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

HTML5

5806 questions

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

3 html内h1タグをdivに変更

退会済みユーザー

2017/07/23 14:34 投稿

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

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

◆不明点

以下のxmlファイルの「<person name="**Emily**">」の「**Emily**」を、

HTMLファイル「<~~h1 class = "name"><p>**Name**</p></h1~~>」のpタグ内の「**Name**」に入れたいのですが

HTMLファイル「<div class = "name"><p>**Name**</p></div>」のpタグ内の「**Name**」に入れたいのですが

構文が分かりません。。

恐らくjsファイルが間違っていると思うのですが検索しても答えが見つからず困っています。

jsファイル内**outputSuccess()**内の処理が特に分かりません。

var txt = $(name).find('person name').text();

↑の、「$()」に入るのはhtmlのクラス名、「find()」に入るのはxmlのタグ名、

という認識がまず間違っていますか？

↓**test.xml**

```

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

<ramen>

</person>

</ramen>

```

↓**Sample.html**

```

<!DOCTYPE ～～～ >

<html>

<head>

～～

</head>

<body>

<~~h1 class = "name">**<p>Name</p>**</h1~~>

</body>

</html>

```

↓**ajax.js**

```

xmlPath="../xml/test.xml";

nameOutput = '.name'

$(document).ready(loadAjax);

function loadAjax(){

getAjaxData();

}

/*

jQuery xmlリクエスト

----------------------------------------------------------------------*/

function getAjaxData(){

$.ajax({

url:xmlPath,

success:outputSuccess

});

}

/*getAjaxData ／ success時処理

----------------------------------------------------------------------*/

function outputSuccess(){

var txt = $(name).find('person name').text();

$(nameOutput).text(txt);

}

```

出来るだけシンプルな方法を教えていただけますと助かります。よろしくお願いいたします。

JavaScript

22746 questions

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

XML

802 questions

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

HTML5

5806 questions

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

2 jaファイル追記

退会済みユーザー

2017/07/23 12:40 投稿

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

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

◆不明点

以下のxmlファイルの「<person name="**Emily**">」の「**Emily**」を

HTMLファイルの「<td>**Name1**</td>」の「**Name1**」に入れたいのですが構文が分かりません。

以下のxmlファイルの「<person name="**Emily**">」の「**Emily**」を、

HTMLファイル「<h1 class = "name"><p>**Name**</p></h1>」のpタグ内の「**Name**」に入れたいのですが

構文が分かりません。。

恐らくjsファイルが間違っていると思うのですが検索しても答えが見つからず困っています。

jsファイル内**outputSuccess()**内の処理が特に分かりません。

var txt　=　$(name).find('person name').text();

↑の、「$()」に入るのはhtmlのクラス名、「find()」に入るのはxmlのタグ名、

という認識がまず間違っていますか？

↓**test.xml**

```

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

<ramen>

~~<age>50</age>~~

~~<favorite>塩</favorite>~~

~~</person>~~

~~<person name="Ken">~~

~~<age>20</age>~~

~~<favorite>しょうゆ</favorite>~~

</person>

</ramen>

```

↓**Sample.html**

```

<!DOCTYPE ～～～ >

<html>

<head>

～～

</head>

<body>

<table>

<tr>

<th>好きなラーメン</th>

</tr>

<tr>

<td>taste1</td>

</tr>

<tr>

<td>taste2</td>

</tr>

</table>

</body>

</html>

```

↓**ajax.js**

```

xmlPath="../xml/test.xml";

nameOutput = '.name'

$(document).ready(loadAjax);

function loadAjax(){

getAjaxData();

}

/*

jQuery xmlリクエスト

----------------------------------------------------------------------*/

function getAjaxData(){

$.ajax({

url:xmlPath,

success:outputSuccess

});

}

/*getAjaxData ／ success時処理

----------------------------------------------------------------------*/

function outputSuccess(){

var txt　=　$(name).find('person name').text();

$(nameOutput).text(txt);

}

```

出来るだけシンプルな方法を教えていただけますと助かります。よろしくお願いいたします。

JavaScript

22746 questions

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

XML

802 questions

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

HTML5

5806 questions

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1 件名に「Javascript」を追記

退会済みユーザー

2017/07/21 11:00 投稿

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

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

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

◆不明点

以下のxmlファイルの「<person name="**Emily**">」の「**Emily**」を

HTMLファイルの「<td>**Name1**</td>」の「**Name1**」に入れたいのですが構文が分かりません。

↓**test.xml**

```

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

<ramen>

</person>

</person>

</ramen>

```

↓**Sample.html**

```

<!DOCTYPE ～～～ >

<html>

<head>

～～

</head>

<body>

<table>

<tr>

<th>好きなラーメン</th>

</tr>

<tr>

<td>taste1</td>

</tr>

<tr>

<td>taste2</td>

</tr>

</table>

</body>

</html>

```

出来るだけシンプルな方法を教えていただけますと助かります。よろしくお願いいたします。

JavaScript

22746 questions

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

XML

802 questions

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

HTML5

5806 questions

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

質問編集履歴

teratailアカウントでログイン

SNSアカウントでログイン