teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問xmlのデータをJavascriptで取り込みたい

編集履歴

質問編集履歴

4

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

2017/07/25 08:07

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -2,30 +2,21 @@
2
2
 
3
3
 
4
4
  ◆不明点
5
- 以下のxmlファイルの「<person name="**Emily**">」の「**Emily**」を、
5
+ 以下のxmlファイルの「<name="**Emily**">」の「**Emily**」を、
6
6
 
7
- HTMLファイル「<div class = "name"><p>**Name**</p></div>」のpタグ内の「**Name**」に入れたいのですが
7
+ HTMLファイル「<div class = "name">**<p id = "htmlId">Name</p>**</div>」のpタグ内「**Name**」に入れたいのですが構文が分かりません。。
8
8
 
9
- 構文が分かりません。。
10
9
 
11
- 恐らくjsファイルが間違っていると思うのですが検索しても答えが見つからず困っています。
12
10
 
13
- jsファイル内**outputSuccess()**内の処理が特に分かりません。
14
- var txt = $(name).find('person name').text();
15
- ↑の、「$()」に入るのはhtmlのクラス名、「find()」に入るのはxmlのタグ名、
16
- という認識がまず間違っていますか？
17
11
 
18
-
19
-
20
-
21
12
  ↓**test.xml**
22
13
  ```
23
14
  <?xml version="1.0" encoding="utf-8" standalone="yes"?>
24
15
 
25
- <ramen>
16
+ <English>
26
- <person name="Emily">
17
+ <name="Emily">
27
- </person>
28
- </ramen>
18
+ </name>
19
+ </English>
29
20
  ```
30
21
 
31
22
  ↓**Sample.html**
@@ -36,35 +27,31 @@
36
27
  ～～
37
28
  </head>
38
29
  <body>
39
- <div class = "name">**<p>Name</p>**</div>
30
+ <div class = "name">**<p id = "">Name</p>**</div>
40
31
  </body>
41
32
  </html>
42
33
  ```
43
34
  ↓**ajax.js**
44
35
  ```
45
- xmlPath="../xml/test.xml";
46
- nameOutput = '.name'
47
-
48
- $(document).ready(loadAjax);
49
- function loadAjax(){
50
- getAjaxData();
51
- }
52
- /*
53
- jQuery xmlリクエスト
54
- ----------------------------------------------------------------------*/
55
- function getAjaxData(){
36
+ function getXmlData() {
37
+ var filePath = "test.xml";
38
+ var data = new XMLHttpRequest();
39
+ data.open("GET",filePath);
56
- $.ajax({
40
+ data.send();
41
+
57
- url:xmlPath,
42
+ data.onload = function(){ //読み込み完了時の実行内容
58
- success:outputSuccess
43
+ var date = data.responseXML;
44
+ var html = document.getElementById("htmlId"); //HTMLファイル内のid名(htmlId)を変数「html」に代入
45
+ var xml = date.getElementsByTagName("name"); //XMLファイルのタグ「name」を変数「xml」に入れる
46
+ html = xml; //HTMLにxml(タグ名「name」)を表示させたい
59
- });
47
+ };
60
- }
48
+
61
- /*getAjaxData ／ success時処理
62
- ----------------------------------------------------------------------*/
63
- function outputSuccess(){
64
- var txt = $(name).find('person name').text();
65
- $(nameOutput).text(txt);
66
- }
67
49
  ```
68
50
 
69
-
51
+ jsファイルにXMLファイルのデータを取り込み、
52
+ 取り込んだデータをHTMLに表示させる、といった処理を書いたつもりなのですが上手くいきません。(HTMLに何も表示されない)
53
+ 恐らく何かが足りないのだと思うのですがそれが何かが分かりません。
54
+ XMLファイルのタグを指定する際に<name>タグは<English>タグの中に入っているから
55
+ __getElementsByTagName("English")[0];__と指定しなくてはならないでしょうか。
70
- 出来るだけシンプルな方法を教えていただけますと助かります。よろしくお願いいたします。
56
+ ご教示いただけますと助かります。
57
+ よろしくお願いいたします。

3

html内h1タグをdivに変更

2017/07/25 08:07

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -4,7 +4,7 @@
4
4
  ◆不明点
5
5
  以下のxmlファイルの「<person name="**Emily**">」の「**Emily**」を、
6
6
 
7
- HTMLファイル「<h1 class = "name"><p>**Name**</p></h1>」のpタグ内の「**Name**」に入れたいのですが
7
+ HTMLファイル「<div class = "name"><p>**Name**</p></div>」のpタグ内の「**Name**」に入れたいのですが
8
8
 
9
9
  構文が分かりません。。
10
10
 
@@ -36,7 +36,7 @@
36
36
  ～～
37
37
  </head>
38
38
  <body>
39
- <h1 class = "name">**<p>Name</p>**</h1>
39
+ <div class = "name">**<p>Name</p>**</div>
40
40
  </body>
41
41
  </html>
42
42
  ```

2

jaファイル追記

2017/07/23 05:34

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,25 +1,30 @@
1
1
  「xmlファイルの値をHTMLに表示する」というシンプルな事をしたいのですが検索しても複雑なコードしか発見出来ず構文すら分からない状態です。
2
2
 
3
+
3
4
  ◆不明点
4
- 以下のxmlファイルの「<person name="**Emily**">」の「**Emily**」を
5
+ 以下のxmlファイルの「<person name="**Emily**">」の「**Emily**」を、
5
- HTMLファイルの「<td>**Name1**</td>」の「**Name1**」に入れたいのですが構文が分かりません。
6
6
 
7
+ HTMLファイル「<h1 class = "name"><p>**Name**</p></h1>」のpタグ内の「**Name**」に入れたいのですが
7
8
 
9
+ 構文が分かりません。。
8
10
 
11
+ 恐らくjsファイルが間違っていると思うのですが検索しても答えが見つからず困っています。
9
12
 
13
+ jsファイル内**outputSuccess()**内の処理が特に分かりません。
14
+ var txt = $(name).find('person name').text();
15
+ ↑の、「$()」に入るのはhtmlのクラス名、「find()」に入るのはxmlのタグ名、
16
+ という認識がまず間違っていますか？
17
+
18
+
19
+
20
+
10
21
  ↓**test.xml**
11
22
  ```
12
23
  <?xml version="1.0" encoding="utf-8" standalone="yes"?>
13
24
 
14
25
  <ramen>
15
26
  <person name="Emily">
16
- <age>50</age>
17
- <favorite>塩</favorite>
18
27
  </person>
19
- <person name="Ken">
20
- <age>20</age>
21
- <favorite>しょうゆ</favorite>
22
- </person>
23
28
  </ramen>
24
29
  ```
25
30
 
@@ -31,25 +36,35 @@
31
36
  ～～
32
37
  </head>
33
38
  <body>
34
- <table>
35
- <tr>
36
- <th>名前</th>
37
- <th>年齢</th>
38
- <th>好きなラーメン</th>
39
- </tr>
40
- <tr>
41
- <td>Name1</td>
42
- <td>age1</td>
43
- <td>taste1</td>
44
- </tr>
45
- <tr>
46
- <td>Name2</td>
39
+ <h1 class = "name">**<p>Name</p>**</h1>
47
- <td>age2</td>
48
- <td>taste2</td>
49
- </tr>
50
- </table>
51
40
  </body>
52
41
  </html>
53
42
  ```
43
+ ↓**ajax.js**
44
+ ```
45
+ xmlPath="../xml/test.xml";
46
+ nameOutput = '.name'
54
47
 
48
+ $(document).ready(loadAjax);
49
+ function loadAjax(){
50
+ getAjaxData();
51
+ }
52
+ /*
53
+ jQuery xmlリクエスト
54
+ ----------------------------------------------------------------------*/
55
+ function getAjaxData(){
56
+ $.ajax({
57
+ url:xmlPath,
58
+ success:outputSuccess
59
+ });
60
+ }
61
+ /*getAjaxData ／ success時処理
62
+ ----------------------------------------------------------------------*/
63
+ function outputSuccess(){
64
+ var txt = $(name).find('person name').text();
65
+ $(nameOutput).text(txt);
66
+ }
67
+ ```
68
+
69
+
55
70
  出来るだけシンプルな方法を教えていただけますと助かります。よろしくお願いいたします。

1

件名に「Javascript」を追記

2017/07/23 03:40

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- xmlのデータを取り込みたい
1
+ xmlのデータをJavascriptで取り込みたい
body CHANGED
File without changes