質問編集履歴

4

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

2017/07/25 08:07

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -6,29 +6,11 @@
6
6
 
7
7
  ◆不明点
8
8
 
9
- 以下のxmlファイルの「<person name="**Emily**">」の「**Emily**」を、
9
+ 以下のxmlファイルの「<name="**Emily**">」の「**Emily**」を、
10
10
 
11
11
 
12
12
 
13
- HTMLファイル「<div class = "name"><p>**Name**</p></div>」のpタグ内「**Name**」に入れたいのですが
13
+ HTMLファイル「<div class = "name">**<p id = "htmlId">Name</p>**</div>」のpタグ内「**Name**」に入れたいのですが構文が分かりません。。
14
-
15
-
16
-
17
- 構文が分かりません。。
18
-
19
-
20
-
21
- 恐らくjsファイルが間違っていると思うのですが検索しても答えが見つからず困っています。
22
-
23
-
24
-
25
- jsファイル内**outputSuccess()**内の処理が特に分かりません。
26
-
27
- var txt = $(name).find('person name').text();
28
-
29
- ↑の、「$()」に入るのはhtmlのクラス名、「find()」に入るのはxmlのタグ名、
30
-
31
- という認識がまず間違っていますか?
32
14
 
33
15
 
34
16
 
@@ -46,13 +28,13 @@
46
28
 
47
29
 
48
30
 
49
- <ramen>
31
+ <English>
50
32
 
51
- <person name="Emily">
33
+ <name="Emily">
52
34
 
53
- </person>
35
+ </name>
54
36
 
55
- </ramen>
37
+ </English>
56
38
 
57
39
  ```
58
40
 
@@ -74,7 +56,7 @@
74
56
 
75
57
  <body>
76
58
 
77
- <div class = "name">**<p>Name</p>**</div>
59
+ <div class = "name">**<p id = "">Name</p>**</div>
78
60
 
79
61
  </body>
80
62
 
@@ -86,54 +68,46 @@
86
68
 
87
69
  ```
88
70
 
89
- xmlPath="../xml/test.xml";
71
+ function getXmlData() {
90
72
 
91
- nameOutput = '.name'
73
+ var filePath = "test.xml";
92
74
 
75
+ var data = new XMLHttpRequest();
93
76
 
77
+ data.open("GET",filePath);
94
78
 
95
- $(document).ready(loadAjax);
79
+ data.send();
96
80
 
97
- function loadAjax(){
81
+
98
82
 
99
- getAjaxData();
83
+ data.onload = function(){ //読み込み完了時の実行内容
100
84
 
101
- }
85
+ var date = data.responseXML;
102
86
 
103
- /*
87
+ var html = document.getElementById("htmlId"); //HTMLファイル内のid名(htmlId)を変数「html」に代入
104
88
 
105
- jQuery xmlリクエスト
89
+ var xml = date.getElementsByTagName("name"); //XMLファイルのタグ「name」を変数「xml」に入れる
106
90
 
107
- ----------------------------------------------------------------------*/
91
+ html = xml; //HTMLにxml(タグ名「name」)を表示させたい
108
92
 
109
- function getAjaxData(){
93
+ };
110
94
 
111
- $.ajax({
95
+
112
-
113
- url:xmlPath,
114
-
115
- success:outputSuccess
116
-
117
- });
118
-
119
- }
120
-
121
- /*getAjaxData / success時処理
122
-
123
- ----------------------------------------------------------------------*/
124
-
125
- function outputSuccess(){
126
-
127
- var txt = $(name).find('person name').text();
128
-
129
- $(nameOutput).text(txt);
130
-
131
- }
132
96
 
133
97
  ```
134
98
 
135
99
 
136
100
 
101
+ jsファイルにXMLファイルのデータを取り込み、
137
102
 
103
+ 取り込んだデータをHTMLに表示させる、といった処理を書いたつもりなのですが上手くいきません。(HTMLに何も表示されない)
138
104
 
105
+ 恐らく何かが足りないのだと思うのですがそれが何かが分かりません。
106
+
107
+ XMLファイルのタグを指定する際に<name>タグは<English>タグの中に入っているから
108
+
109
+ __getElementsByTagName("English")[0];__と指定しなくてはならないでしょうか。
110
+
139
- 出来るだけシンプルな方法をえていただけますと助かります。よろしくお願いいたします。
111
+ いただけますと助かります。
112
+
113
+ よろしくお願いいたします。

3

html内h1タグをdivに変更

2017/07/25 08:07

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
 
12
12
 
13
- HTMLファイル「<h1 class = "name"><p>**Name**</p></h1>」のpタグ内の「**Name**」に入れたいのですが
13
+ HTMLファイル「<div class = "name"><p>**Name**</p></div>」のpタグ内の「**Name**」に入れたいのですが
14
14
 
15
15
 
16
16
 
@@ -74,7 +74,7 @@
74
74
 
75
75
  <body>
76
76
 
77
- <h1 class = "name">**<p>Name</p>**</h1>
77
+ <div class = "name">**<p>Name</p>**</div>
78
78
 
79
79
  </body>
80
80
 

2

jaファイル追記

2017/07/23 05:34

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,12 +1,34 @@
1
1
  「xmlファイルの値をHTMLに表示する」というシンプルな事をしたいのですが検索しても複雑なコードしか発見出来ず構文すら分からない状態です。
2
+
3
+
2
4
 
3
5
 
4
6
 
5
7
  ◆不明点
6
8
 
7
- 以下のxmlファイルの「<person name="**Emily**">」の「**Emily**」を
9
+ 以下のxmlファイルの「<person name="**Emily**">」の「**Emily**」を
8
10
 
11
+
12
+
9
- HTMLファイル「<td>**Name1**</td>」の「**Name1**」に入れたいのですが構文が分かりません。
13
+ HTMLファイル「<h1 class = "name"><p>**Name**</p></h1>」のpタグ内の「**Name**」に入れたいのですが
14
+
15
+
16
+
17
+ 構文が分かりません。。
18
+
19
+
20
+
21
+ 恐らくjsファイルが間違っていると思うのですが検索しても答えが見つからず困っています。
22
+
23
+
24
+
25
+ jsファイル内**outputSuccess()**内の処理が特に分かりません。
26
+
27
+ var txt = $(name).find('person name').text();
28
+
29
+ ↑の、「$()」に入るのはhtmlのクラス名、「find()」に入るのはxmlのタグ名、
30
+
31
+ という認識がまず間違っていますか?
10
32
 
11
33
 
12
34
 
@@ -27,18 +49,6 @@
27
49
  <ramen>
28
50
 
29
51
  <person name="Emily">
30
-
31
- <age>50</age>
32
-
33
- <favorite>塩</favorite>
34
-
35
- </person>
36
-
37
- <person name="Ken">
38
-
39
- <age>20</age>
40
-
41
- <favorite>しょうゆ</favorite>
42
52
 
43
53
  </person>
44
54
 
@@ -64,39 +74,7 @@
64
74
 
65
75
  <body>
66
76
 
67
- <table>
68
-
69
- <tr>
70
-
71
- <th>名前</th>
72
-
73
- <th>年齢</th>
74
-
75
- <th>好きなラーメン</th>
76
-
77
- </tr>
78
-
79
- <tr>
80
-
81
- <td>Name1</td>
82
-
83
- <td>age1</td>
84
-
85
- <td>taste1</td>
86
-
87
- </tr>
88
-
89
- <tr>
90
-
91
- <td>Name2</td>
77
+ <h1 class = "name">**<p>Name</p>**</h1>
92
-
93
- <td>age2</td>
94
-
95
- <td>taste2</td>
96
-
97
- </tr>
98
-
99
- </table>
100
78
 
101
79
  </body>
102
80
 
@@ -104,6 +82,58 @@
104
82
 
105
83
  ```
106
84
 
85
+ ↓**ajax.js**
86
+
87
+ ```
88
+
89
+ xmlPath="../xml/test.xml";
90
+
91
+ nameOutput = '.name'
92
+
93
+
94
+
95
+ $(document).ready(loadAjax);
96
+
97
+ function loadAjax(){
98
+
99
+ getAjaxData();
100
+
101
+ }
102
+
103
+ /*
104
+
105
+ jQuery xmlリクエスト
106
+
107
+ ----------------------------------------------------------------------*/
108
+
109
+ function getAjaxData(){
110
+
111
+ $.ajax({
112
+
113
+ url:xmlPath,
114
+
115
+ success:outputSuccess
116
+
117
+ });
118
+
119
+ }
120
+
121
+ /*getAjaxData / success時処理
122
+
123
+ ----------------------------------------------------------------------*/
124
+
125
+ function outputSuccess(){
126
+
127
+ var txt = $(name).find('person name').text();
128
+
129
+ $(nameOutput).text(txt);
130
+
131
+ }
132
+
133
+ ```
134
+
135
+
136
+
107
137
 
108
138
 
109
139
  出来るだけシンプルな方法を教えていただけますと助かります。よろしくお願いいたします。

1

件名に「Javascript」を追記

2017/07/23 03:40

投稿

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