質問編集履歴
6
コード修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
Test.json
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
|
|
38
38
|
|
|
39
39
|
{
|
|
40
40
|
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
|
|
50
50
|
|
|
51
51
|
|
|
52
52
|
|
|
@@ -70,97 +70,161 @@
|
|
|
70
70
|
|
|
71
71
|
```javascript
|
|
72
72
|
|
|
73
|
+
$(function () {
|
|
74
|
+
|
|
75
|
+
$('#btn1').click(
|
|
76
|
+
|
|
77
|
+
function () {
|
|
78
|
+
|
|
79
|
+
$("out6").html("データ取得");
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
// $(window).load(function () {
|
|
88
|
+
|
|
89
|
+
//$("#sample").html("テストを行います");
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
//1.$.ajaxメソッドで通信を行う
|
|
94
|
+
|
|
95
|
+
// dataでは、フォームの内容をserialize()している
|
|
96
|
+
|
|
97
|
+
// →serialize()の内容は、cs1=custom1&cs2=custom2
|
|
98
|
+
|
|
99
|
+
$.ajax({
|
|
100
|
+
|
|
101
|
+
url: 'http://www.json-generator.com/api/json/get/cggIIAmKnC?indent=2',
|
|
102
|
+
|
|
103
|
+
type: 'GET',
|
|
104
|
+
|
|
105
|
+
datatype: 'json',
|
|
106
|
+
|
|
107
|
+
//2. doneは通信に成功したときに実行される処理
|
|
108
|
+
|
|
109
|
+
//引数のdata1は通信で取得したデータ
|
|
110
|
+
|
|
111
|
+
//引数のtextstatusは通信結果のステータス
|
|
112
|
+
|
|
113
|
+
//引数のjqzXHRは、XMLHttpRequestオブジェクト
|
|
114
|
+
|
|
115
|
+
}).done(function (data1, textStatus, jqXHR) {
|
|
116
|
+
|
|
117
|
+
$("#out1").html(jqXHR.status);
|
|
118
|
+
|
|
119
|
+
$("#out2").html(textStatus);
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
//3. キーを指定して値を表示
|
|
124
|
+
|
|
125
|
+
console.log(data1);
|
|
126
|
+
|
|
127
|
+
$("#out4").html(data1["judge1"]);
|
|
128
|
+
|
|
129
|
+
//取得したageのvalueをrectのid='PA_1'へ設定する
|
|
130
|
+
|
|
131
|
+
//$(function () {
|
|
132
|
+
|
|
133
|
+
// var age = $('#PA_1').val(data1[0]["age"]);
|
|
134
|
+
|
|
135
|
+
// if (age.val > 41) {
|
|
136
|
+
|
|
137
|
+
// console.log('赤')
|
|
138
|
+
|
|
139
|
+
// } else {
|
|
140
|
+
|
|
141
|
+
// console.log('緑')
|
|
142
|
+
|
|
143
|
+
// }
|
|
144
|
+
|
|
145
|
+
//});
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
//4.オブジェクトをjson形式の文字列に変換
|
|
156
|
+
|
|
157
|
+
var data2 = JSON.stringify(data1);
|
|
158
|
+
|
|
159
|
+
console.log(data2);//コンソールへjson形式で表示
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
//5.json形式の文字列をオブジェクトにし、キーを指定して値を表示
|
|
164
|
+
|
|
165
|
+
//キーを指定して値(/www.json-generator.com/api/json/)を表示
|
|
166
|
+
|
|
167
|
+
var data3 = JSON.parse(data2);
|
|
168
|
+
|
|
169
|
+
$("#out5").html(data3["judge2"]);
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
//6. failは、通信に失敗したときに実行される
|
|
174
|
+
|
|
175
|
+
}).fail(function (jqXHR, textStatus, errorThrown) {
|
|
176
|
+
|
|
177
|
+
$("#out1").html(jqXHR.status); //jqXHR.statusを表示
|
|
178
|
+
|
|
179
|
+
$("#out2").html(textStatus); //textStatusを表示
|
|
180
|
+
|
|
181
|
+
$("#out3").html(errorThrown); //errorThrownを表示
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
//7. always は 成功、失敗に関わらず実行
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
}).always(function () {
|
|
190
|
+
|
|
191
|
+
$("#out6").html("complete"); //表示3
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
});
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
});
|
|
200
|
+
|
|
201
|
+
});
|
|
202
|
+
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
### 現状(変更ボタン押下時）
|
|
208
|
+
|
|
209
|
+
```javascript
|
|
210
|
+
|
|
73
211
|
$(function () {
|
|
74
212
|
|
|
75
|
-
|
|
213
|
+
|
|
76
|
-
|
|
77
|
-
|
|
214
|
+
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
//1.$.ajaxメソッドで通信を行う
|
|
82
|
-
|
|
83
|
-
// dataでは、フォームの内容をserialize()している
|
|
84
|
-
|
|
85
|
-
// →serialize()の内容は、cs1=custom1&cs2=custom2
|
|
86
|
-
|
|
87
|
-
$.ajax({
|
|
88
|
-
|
|
89
|
-
url: //ここを自前でやりたい（http://localhost:■■■■■■/）？
|
|
90
|
-
|
|
91
|
-
type: 'GET',
|
|
92
|
-
|
|
93
|
-
datatype: 'json',
|
|
94
|
-
|
|
95
|
-
//2. doneは通信に成功したときに実行される処理
|
|
96
|
-
|
|
97
|
-
//引数のdata1は通信で取得したデータ
|
|
98
|
-
|
|
99
|
-
//引数のtextstatusは通信結果のステータス
|
|
100
|
-
|
|
101
|
-
//引数のjqzXHRは、XMLHttpRequestオブジェクト
|
|
102
|
-
|
|
103
|
-
}).done(function (data1, textStatus, jqXHR) {
|
|
104
|
-
|
|
105
|
-
$("#out1").html(jqXHR.status);
|
|
106
|
-
|
|
107
|
-
$("#out2").html(textStatus);
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
//3. キーを指定して値を表示
|
|
112
|
-
|
|
113
|
-
console.log(data1);
|
|
114
|
-
|
|
115
|
-
$("#out4").html(data1[0]["age"]);
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
//4.オブジェクトをjson形式の文字列に変換
|
|
120
|
-
|
|
121
|
-
var data2 = JSON.stringify(data1);
|
|
122
|
-
|
|
123
|
-
console.log(data2);//コンソールへjson形式で表示
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
//5.json形式の文字列をオブジェクトにし、キーを指定して値を表示
|
|
128
|
-
|
|
129
|
-
//キーを指定して値(/www.json-generator.com/api/json/)を表示
|
|
130
|
-
|
|
131
|
-
var data3 = JSON.parse(data2);
|
|
132
|
-
|
|
133
|
-
|
|
215
|
+
document.getElementById("change").addEventListener("click", function () {
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
216
|
+
|
|
138
|
-
|
|
139
|
-
|
|
217
|
+
|
|
140
|
-
|
|
141
|
-
|
|
218
|
+
|
|
142
|
-
|
|
143
|
-
|
|
219
|
+
var poly = document.getElementById("myPoly"); // 多角形（ポリゴン）
|
|
144
|
-
|
|
220
|
+
|
|
145
|
-
|
|
221
|
+
poly.setAttribute("fill", "#00ff00"); // 緑色で塗りつぶす
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
222
|
+
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
}).always(function () {
|
|
154
|
-
|
|
155
|
-
|
|
223
|
+
poly.setAttribute("stroke", "blue"); // 青色の線にする
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
224
|
+
|
|
159
|
-
|
|
225
|
+
}, true);
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
226
|
+
|
|
227
|
+
|
|
164
228
|
|
|
165
229
|
});
|
|
166
230
|
|
|
@@ -168,106 +232,78 @@
|
|
|
168
232
|
|
|
169
233
|
|
|
170
234
|
|
|
171
|
-
###
|
|
172
|
-
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
|
|
235
|
+
### ★のsvg
|
|
236
|
+
|
|
237
|
+
```html
|
|
238
|
+
|
|
239
|
+
<h6 id="sample">sample</h6>
|
|
240
|
+
|
|
241
|
+
<p>jqXHR.statusを表示:<span id="out1"></span></p>
|
|
242
|
+
|
|
243
|
+
<p>textStatusを表示:<span id="out2"></span></p>
|
|
244
|
+
|
|
245
|
+
<p>errorThrownを表示:<span id="out3"></span></p>
|
|
246
|
+
|
|
247
|
+
<p>表示１(out4):<span id="out4"></span></p>
|
|
248
|
+
|
|
249
|
+
<p>表示２(out5):<span id="out5"></span></p>
|
|
250
|
+
|
|
251
|
+
<p>表示３(out6):<span id="out6"></span></p>
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
<form>
|
|
256
|
+
|
|
257
|
+
<input type="button" id="change" value="変更">
|
|
258
|
+
|
|
259
|
+
</form>
|
|
260
|
+
|
|
261
|
+
<svg>
|
|
262
|
+
|
|
263
|
+
<polygon id="myPoly" fill="#FFF000" stroke="#FF0000" points="72.278,58.394 78.338,91.04 48.74,75.993 19.565,91.844 24.729,59.045 0.639,36.196 33.428,30.972 47.715,1 62.814,30.57 95.734,34.895 " />
|
|
264
|
+
|
|
265
|
+
</svg>
|
|
266
|
+
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
svgのidとjsonで取得したkeyとvalueを結びつけるところ？で詰まっています。そもそもその前にやることがありますでしょうか。
|
|
270
|
+
|
|
271
|
+
ご教授をお願いいたします。
|
|
272
|
+
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
### サーバサイドのコードがさっぱり
|
|
276
|
+
|
|
277
|
+
```c#
|
|
278
|
+
|
|
279
|
+
[HttpGet]
|
|
280
|
+
|
|
281
|
+
public ActionResult AjaxTest()
|
|
282
|
+
|
|
283
|
+
{
|
|
284
|
+
|
|
285
|
+
if (Request.IsAjaxRequest())
|
|
286
|
+
|
|
287
|
+
{
|
|
288
|
+
|
|
289
|
+
|
|
290
|
+
|
|
291
|
+
//ここに書く処理が整理できない
|
|
292
|
+
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
return Content("Ajax通信以外のアクセスはできません。");
|
|
296
|
+
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
|
|
300
|
+
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
|
|
176
304
|
|
|
177
305
|
|
|
178
306
|
|
|
179
|
-
document.getElementById("change").addEventListener("click", function () {
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
var poly = document.getElementById("myPoly"); // 多角形（ポリゴン）
|
|
184
|
-
|
|
185
|
-
poly.setAttribute("fill", "#00ff00"); // 緑色で塗りつぶす
|
|
186
|
-
|
|
187
|
-
poly.setAttribute("stroke", "blue"); // 青色の線にする
|
|
188
|
-
|
|
189
|
-
}, true);
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
});
|
|
194
|
-
|
|
195
|
-
```
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
### ★のsvg
|
|
200
|
-
|
|
201
|
-
```html
|
|
202
|
-
|
|
203
|
-
<h6 id="sample">sample</h6>
|
|
204
|
-
|
|
205
|
-
<p>jqXHR.statusを表示:<span id="out1"></span></p>
|
|
206
|
-
|
|
207
|
-
<p>textStatusを表示:<span id="out2"></span></p>
|
|
208
|
-
|
|
209
|
-
<p>errorThrownを表示:<span id="out3"></span></p>
|
|
210
|
-
|
|
211
|
-
<p>表示１(out4):<span id="out4"></span></p>
|
|
212
|
-
|
|
213
|
-
<p>表示２(out5):<span id="out5"></span></p>
|
|
214
|
-
|
|
215
|
-
<p>表示３(out6):<span id="out6"></span></p>
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
<form>
|
|
220
|
-
|
|
221
|
-
<input type="button" id="change" value="変更">
|
|
222
|
-
|
|
223
|
-
</form>
|
|
224
|
-
|
|
225
|
-
<svg>
|
|
226
|
-
|
|
227
|
-
<polygon id="myPoly" fill="#FFF000" stroke="#FF0000" points="72.278,58.394 78.338,91.04 48.74,75.993 19.565,91.844 24.729,59.045 0.639,36.196 33.428,30.972 47.715,1 62.814,30.57 95.734,34.895 " />
|
|
228
|
-
|
|
229
|
-
</svg>
|
|
230
|
-
|
|
231
|
-
```
|
|
232
|
-
|
|
233
|
-
svgのidとjsonで取得したkeyとvalueを結びつけるところ？で詰まっています。そもそもその前にやることがありますでしょうか。
|
|
234
|
-
|
|
235
|
-
ご教授をお願いいたします。
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
### サーバサイドのコードがさっぱり
|
|
240
|
-
|
|
241
|
-
```c#
|
|
242
|
-
|
|
243
|
-
[HttpGet]
|
|
244
|
-
|
|
245
|
-
public ActionResult AjaxTest()
|
|
246
|
-
|
|
247
|
-
{
|
|
248
|
-
|
|
249
|
-
if (Request.IsAjaxRequest())
|
|
250
|
-
|
|
251
|
-
{
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
//ここに書く処理が整理できない
|
|
256
|
-
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
return Content("Ajax通信以外のアクセスはできません。");
|
|
260
|
-
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
307
|
}
|
|
272
308
|
|
|
273
309
|
```
|
5
urlへlocalhostの記述追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
|
|
87
87
|
$.ajax({
|
|
88
88
|
|
|
89
|
-
url:
|
|
89
|
+
url: //ここを自前でやりたい（http://localhost:■■■■■■/）？
|
|
90
90
|
|
|
91
91
|
type: 'GET',
|
|
92
92
|
|
4
コード修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -200,7 +200,23 @@
|
|
|
200
200
|
|
|
201
201
|
```html
|
|
202
202
|
|
|
203
|
+
<h6 id="sample">sample</h6>
|
|
204
|
+
|
|
205
|
+
<p>jqXHR.statusを表示:<span id="out1"></span></p>
|
|
206
|
+
|
|
207
|
+
<p>textStatusを表示:<span id="out2"></span></p>
|
|
208
|
+
|
|
209
|
+
<p>errorThrownを表示:<span id="out3"></span></p>
|
|
210
|
+
|
|
211
|
+
<p>表示１(out4):<span id="out4"></span></p>
|
|
212
|
+
|
|
213
|
+
<p>表示２(out5):<span id="out5"></span></p>
|
|
214
|
+
|
|
215
|
+
<p>表示３(out6):<span id="out6"></span></p>
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
|
|
203
|
-
|
|
219
|
+
<form>
|
|
204
220
|
|
|
205
221
|
<input type="button" id="change" value="変更">
|
|
206
222
|
|
3
・環境追加・jsonデータ修正・
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -12,17 +12,17 @@
|
|
|
12
12
|
|
|
13
13
|
フレームワーク:asp.net MVC Framework
|
|
14
14
|
|
|
15
|
+
DB:Postgresql
|
|
16
|
+
|
|
15
17
|
|
|
16
18
|
|
|
17
19
|
### やりたいことと実現イメージ
|
|
18
20
|
|
|
21
|
+
ajax処理。
|
|
22
|
+
|
|
23
|
+
データベースに定義されている各パーツフィールドのtrue:falseの情報を一定周期でjson形式で取得し値に応じて、対応するパーツの絵（svg）の色（fill）を動的に切替えたい。
|
|
24
|
+
|
|
19
|
-
|
|
25
|
+
今回は変更ボタンを押した際に変更する。
|
|
20
|
-
|
|
21
|
-
勝手なイメージとしては、画面ロード時にsvgの属性とjsonデータを紐付け、条件式により「gender:male」のときは図形を青にするなど
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
|
|
@@ -32,105 +32,33 @@
|
|
|
32
32
|
|
|
33
33
|
```json
|
|
34
34
|
|
|
35
|
+
Test.json
|
|
36
|
+
|
|
35
37
|
[
|
|
36
38
|
|
|
37
|
-
{
|
|
38
|
-
|
|
39
|
-
"
|
|
40
|
-
|
|
41
|
-
"
|
|
42
|
-
|
|
43
|
-
"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
"age": 40,
|
|
52
|
-
|
|
53
|
-
"eyeColor": "green",
|
|
54
|
-
|
|
55
|
-
"name": "Cannon Long",
|
|
56
|
-
|
|
57
|
-
"gender": "male",
|
|
58
|
-
|
|
59
|
-
"company": "IMANT",
|
|
60
|
-
|
|
61
|
-
"email": "cannonlong@imant.com",
|
|
62
|
-
|
|
63
|
-
"phone": "+1 (800) 418-3525",
|
|
64
|
-
|
|
65
|
-
"address": "219 Tennis Court, Brule, South Carolina, 4275",
|
|
66
|
-
|
|
67
|
-
"about": "Ipsum nisi occaecat est sint in sunt incididunt esse id adipisicing. Lorem laboris minim ex aute anim exercitation. Magna nostrud excepteur dolor duis quis excepteur aute sit esse Lorem ut laboris Lorem sunt. Veniam magna commodo tempor proident pariatur aute sit quis aliqua ut ipsum exercitation irure ad. Velit in officia excepteur ea. Consequat nisi sit deserunt mollit laboris esse ullamco.\r\n",
|
|
68
|
-
|
|
69
|
-
"registered": "2014-01-21T01:45:07 -09:00",
|
|
70
|
-
|
|
71
|
-
"latitude": -86.265314,
|
|
72
|
-
|
|
73
|
-
"longitude": 119.701116,
|
|
74
|
-
|
|
75
|
-
"tags": [
|
|
76
|
-
|
|
77
|
-
"amet",
|
|
78
|
-
|
|
79
|
-
"consectetur",
|
|
80
|
-
|
|
81
|
-
"mollit",
|
|
82
|
-
|
|
83
|
-
"non",
|
|
84
|
-
|
|
85
|
-
"et",
|
|
86
|
-
|
|
87
|
-
"nostrud",
|
|
88
|
-
|
|
89
|
-
"officia"
|
|
90
|
-
|
|
91
|
-
],
|
|
92
|
-
|
|
93
|
-
"friends": [
|
|
94
|
-
|
|
95
|
-
{
|
|
96
|
-
|
|
97
|
-
"id": 0,
|
|
98
|
-
|
|
99
|
-
"name": "Alisha Dennis"
|
|
100
|
-
|
|
101
|
-
},
|
|
102
|
-
|
|
103
|
-
{
|
|
104
|
-
|
|
105
|
-
"id": 1,
|
|
106
|
-
|
|
107
|
-
"name": "Rice Henson"
|
|
108
|
-
|
|
109
|
-
},
|
|
110
|
-
|
|
111
|
-
{
|
|
112
|
-
|
|
113
|
-
"id": 2,
|
|
114
|
-
|
|
115
|
-
"name": "Cristina Lee"
|
|
116
|
-
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
],
|
|
120
|
-
|
|
121
|
-
"greeting": "Hello, Cannon Long! You have 4 unread messages.",
|
|
122
|
-
|
|
123
|
-
"favoriteFruit": "strawberry"
|
|
124
|
-
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
]
|
|
39
|
+
{
|
|
40
|
+
|
|
41
|
+
"judge1": true,
|
|
42
|
+
|
|
43
|
+
"judge2": false,
|
|
44
|
+
|
|
45
|
+
"judge3": true
|
|
46
|
+
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
]
|
|
50
|
+
|
|
51
|
+
|
|
128
52
|
|
|
129
53
|
```
|
|
130
54
|
|
|
131
55
|
### 現状(ロード時）
|
|
132
56
|
|
|
133
|
-
下図は上記のjsonファイルをhttpのGETで取得し、load時にage（表示1）とname（表示2）を取得し表示したものになります。
|
|
57
|
+
下図は~~上記の~~jsonファイルをhttpのGETで取得し、load時に*age（表示1）と*name（表示2）を取得し表示したものになります。*(1 jsonデータ修正したので対応してません。
|
|
58
|
+
|
|
59
|
+
※urlの部分を自分のローカルで実現したいが実現方法がわからない。
|
|
60
|
+
|
|
61
|
+
|
|
134
62
|
|
|
135
63
|
|
|
136
64
|
|
|
@@ -138,7 +66,7 @@
|
|
|
138
66
|
|
|
139
67
|
|
|
140
68
|
|
|
141
|
-
### 現状のコード
|
|
69
|
+
### 現状のコード(クライアント）
|
|
142
70
|
|
|
143
71
|
```javascript
|
|
144
72
|
|
|
@@ -158,7 +86,7 @@
|
|
|
158
86
|
|
|
159
87
|
$.ajax({
|
|
160
88
|
|
|
161
|
-
url: '
|
|
89
|
+
url: '//////ここを自前でやりたい
|
|
162
90
|
|
|
163
91
|
type: 'GET',
|
|
164
92
|
|
|
@@ -292,34 +220,38 @@
|
|
|
292
220
|
|
|
293
221
|
|
|
294
222
|
|
|
223
|
+
### サーバサイドのコードがさっぱり
|
|
224
|
+
|
|
225
|
+
```c#
|
|
226
|
+
|
|
295
|
-
|
|
227
|
+
[HttpGet]
|
|
296
|
-
|
|
297
|
-
|
|
228
|
+
|
|
298
|
-
|
|
299
|
-
valメソッドではjsonのデータを取得してsvgのid '＃AP_1'にvalueとして設定することはできませんか？これでは#PA_1のvalueに値は入らないでしょうか。加えてif文の判定式についても見ていただきたいです...
|
|
300
|
-
|
|
301
|
-
//取得したageのvalueをrectのid='PA_1'へ設定する
|
|
302
|
-
|
|
303
|
-
```javascript
|
|
304
|
-
|
|
305
|
-
//3.と//4.の間に以下のコードを挿入。
|
|
306
|
-
|
|
307
|
-
|
|
229
|
+
public ActionResult AjaxTest()
|
|
308
|
-
|
|
230
|
+
|
|
309
|
-
|
|
231
|
+
{
|
|
310
|
-
|
|
232
|
+
|
|
311
|
-
|
|
233
|
+
if (Request.IsAjaxRequest())
|
|
234
|
+
|
|
312
|
-
|
|
235
|
+
{
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
|
|
313
|
-
|
|
239
|
+
//ここに書く処理が整理できない
|
|
314
|
-
|
|
315
|
-
|
|
240
|
+
|
|
316
|
-
|
|
317
|
-
console.log('緑')
|
|
318
|
-
|
|
319
|
-
|
|
241
|
+
}
|
|
242
|
+
|
|
320
|
-
|
|
243
|
+
return Content("Ajax通信以外のアクセスはできません。");
|
|
244
|
+
|
|
321
|
-
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
|
|
322
|
-
|
|
255
|
+
}
|
|
323
|
-
|
|
324
|
-
|
|
256
|
+
|
|
325
|
-
```
|
|
257
|
+
```
|
2
コード追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -289,3 +289,37 @@
|
|
|
289
289
|
svgのidとjsonで取得したkeyとvalueを結びつけるところ？で詰まっています。そもそもその前にやることがありますでしょうか。
|
|
290
290
|
|
|
291
291
|
ご教授をお願いいたします。
|
|
292
|
+
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
### やってみた
|
|
296
|
+
|
|
297
|
+
//3.と//4.の間に以下のコードを挿入。恥ずかしい限りですが、調べながら記述したんですが構文が全然わかりません。
|
|
298
|
+
|
|
299
|
+
valメソッドではjsonのデータを取得してsvgのid '＃AP_1'にvalueとして設定することはできませんか？これでは#PA_1のvalueに値は入らないでしょうか。加えてif文の判定式についても見ていただきたいです...
|
|
300
|
+
|
|
301
|
+
//取得したageのvalueをrectのid='PA_1'へ設定する
|
|
302
|
+
|
|
303
|
+
```javascript
|
|
304
|
+
|
|
305
|
+
//3.と//4.の間に以下のコードを挿入。
|
|
306
|
+
|
|
307
|
+
$(function () {
|
|
308
|
+
|
|
309
|
+
var age = $('#AP_1').val(data1[0]["age"]);
|
|
310
|
+
|
|
311
|
+
if (age.val > 41) {
|
|
312
|
+
|
|
313
|
+
console.log('赤')
|
|
314
|
+
|
|
315
|
+
} else {
|
|
316
|
+
|
|
317
|
+
console.log('緑')
|
|
318
|
+
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
});
|
|
322
|
+
|
|
323
|
+
|
|
324
|
+
|
|
325
|
+
```
|
1
誤字修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
取得したjsonデータの値に応じてsvgの色（fill）を動的に切替えたい。今回は変更ボタンを押した際に変更する。
|
|
20
20
|
|
|
21
|
-
勝手なイメージとしては、画面ロード時にsvgの属性とjsonデータを紐付け、条件式により「gender:male」のときは
|
|
21
|
+
勝手なイメージとしては、画面ロード時にsvgの属性とjsonデータを紐付け、条件式により「gender:male」のときは図形を青にするなど
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
|
|
131
131
|
### 現状(ロード時）
|
|
132
132
|
|
|
133
|
-
下図は上記のjsonファイルをhttpのGETで取得し、load時にageとnameを取得し表示したものになります。
|
|
133
|
+
下図は上記のjsonファイルをhttpのGETで取得し、load時にage（表示1）とname（表示2）を取得し表示したものになります。
|
|
134
134
|
|
|
135
135
|
|
|
136
136
|
|