質問編集履歴
6
コード修正
title
CHANGED
File without changes
|
body
CHANGED
@@ -16,13 +16,13 @@
|
|
16
16
|
### データの形式
|
17
17
|
```json
|
18
18
|
Test.json
|
19
|
-
|
19
|
+
|
20
20
|
{
|
21
21
|
"judge1": true,
|
22
22
|
"judge2": false,
|
23
23
|
"judge3": true
|
24
24
|
}
|
25
|
-
|
25
|
+
|
26
26
|
|
27
27
|
```
|
28
28
|
### 現状(ロード時)
|
@@ -34,15 +34,21 @@
|
|
34
34
|
|
35
35
|
### 現状のコード(クライアント)
|
36
36
|
```javascript
|
37
|
-
|
37
|
+
$(function () {
|
38
|
+
$('#btn1').click(
|
38
|
-
|
39
|
+
function () {
|
39
|
-
|
40
|
+
$("out6").html("データ取得");
|
40
41
|
|
42
|
+
|
43
|
+
|
44
|
+
// $(window).load(function () {
|
45
|
+
//$("#sample").html("テストを行います");
|
46
|
+
|
41
47
|
//1.$.ajaxメソッドで通信を行う
|
42
48
|
// dataでは、フォームの内容をserialize()している
|
43
49
|
// →serialize()の内容は、cs1=custom1&cs2=custom2
|
44
50
|
$.ajax({
|
45
|
-
url:
|
51
|
+
url: 'http://www.json-generator.com/api/json/get/cggIIAmKnC?indent=2',
|
46
52
|
type: 'GET',
|
47
53
|
datatype: 'json',
|
48
54
|
//2. doneは通信に成功したときに実行される処理
|
@@ -55,8 +61,20 @@
|
|
55
61
|
|
56
62
|
//3. キーを指定して値を表示
|
57
63
|
console.log(data1);
|
58
|
-
$("#out4").html(data1[
|
64
|
+
$("#out4").html(data1["judge1"]);
|
65
|
+
//取得したageのvalueをrectのid='PA_1'へ設定する
|
66
|
+
//$(function () {
|
67
|
+
// var age = $('#PA_1').val(data1[0]["age"]);
|
68
|
+
// if (age.val > 41) {
|
69
|
+
// console.log('赤')
|
70
|
+
// } else {
|
71
|
+
// console.log('緑')
|
72
|
+
// }
|
73
|
+
//});
|
74
|
+
|
75
|
+
|
59
76
|
|
77
|
+
|
60
78
|
//4.オブジェクトをjson形式の文字列に変換
|
61
79
|
var data2 = JSON.stringify(data1);
|
62
80
|
console.log(data2);//コンソールへjson形式で表示
|
@@ -64,7 +82,7 @@
|
|
64
82
|
//5.json形式の文字列をオブジェクトにし、キーを指定して値を表示
|
65
83
|
//キーを指定して値(/www.json-generator.com/api/json/)を表示
|
66
84
|
var data3 = JSON.parse(data2);
|
67
|
-
$("#out5").html(data3[
|
85
|
+
$("#out5").html(data3["judge2"]);
|
68
86
|
|
69
87
|
//6. failは、通信に失敗したときに実行される
|
70
88
|
}).fail(function (jqXHR, textStatus, errorThrown) {
|
5
urlへlocalhostの記述追加
title
CHANGED
File without changes
|
body
CHANGED
@@ -42,7 +42,7 @@
|
|
42
42
|
// dataでは、フォームの内容をserialize()している
|
43
43
|
// →serialize()の内容は、cs1=custom1&cs2=custom2
|
44
44
|
$.ajax({
|
45
|
-
url:
|
45
|
+
url: //ここを自前でやりたい(http://localhost:■■■■■■/)?
|
46
46
|
type: 'GET',
|
47
47
|
datatype: 'json',
|
48
48
|
//2. doneは通信に成功したときに実行される処理
|
4
コード修正
title
CHANGED
File without changes
|
body
CHANGED
@@ -99,7 +99,15 @@
|
|
99
99
|
|
100
100
|
### ★のsvg
|
101
101
|
```html
|
102
|
+
<h6 id="sample">sample</h6>
|
103
|
+
<p>jqXHR.statusを表示:<span id="out1"></span></p>
|
104
|
+
<p>textStatusを表示:<span id="out2"></span></p>
|
105
|
+
<p>errorThrownを表示:<span id="out3"></span></p>
|
106
|
+
<p>表示1(out4):<span id="out4"></span></p>
|
107
|
+
<p>表示2(out5):<span id="out5"></span></p>
|
108
|
+
<p>表示3(out6):<span id="out6"></span></p>
|
109
|
+
|
102
|
-
|
110
|
+
<form>
|
103
111
|
<input type="button" id="change" value="変更">
|
104
112
|
</form>
|
105
113
|
<svg>
|
3
・環境追加・jsonデータ修正・
title
CHANGED
File without changes
|
body
CHANGED
@@ -5,70 +5,34 @@
|
|
5
5
|
開発環境:visualstudio2017
|
6
6
|
言語:c#
|
7
7
|
フレームワーク:asp.net MVC Framework
|
8
|
+
DB:Postgresql
|
8
9
|
|
9
10
|
### やりたいことと実現イメージ
|
11
|
+
ajax処理。
|
12
|
+
データベースに定義されている各パーツフィールドのtrue:falseの情報を一定周期でjson形式で取得し値に応じて、対応するパーツの絵(svg)の色(fill)を動的に切替えたい。
|
10
|
-
|
13
|
+
今回は変更ボタンを押した際に変更する。
|
11
|
-
勝手なイメージとしては、画面ロード時にsvgの属性とjsonデータを紐付け、条件式により「gender:male」のときは図形を青にするなど
|
12
14
|
|
13
15
|
|
14
|
-
|
15
|
-
|
16
16
|
### データの形式
|
17
17
|
```json
|
18
|
+
Test.json
|
18
19
|
[
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
"age": 40,
|
27
|
-
"eyeColor": "green",
|
28
|
-
"name": "Cannon Long",
|
29
|
-
"gender": "male",
|
30
|
-
"company": "IMANT",
|
31
|
-
"email": "cannonlong@imant.com",
|
32
|
-
"phone": "+1 (800) 418-3525",
|
33
|
-
"address": "219 Tennis Court, Brule, South Carolina, 4275",
|
34
|
-
"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",
|
35
|
-
"registered": "2014-01-21T01:45:07 -09:00",
|
36
|
-
"latitude": -86.265314,
|
37
|
-
"longitude": 119.701116,
|
38
|
-
"tags": [
|
39
|
-
"amet",
|
40
|
-
"consectetur",
|
41
|
-
"mollit",
|
42
|
-
"non",
|
43
|
-
"et",
|
44
|
-
"nostrud",
|
45
|
-
"officia"
|
46
|
-
],
|
47
|
-
"friends": [
|
48
|
-
{
|
49
|
-
"id": 0,
|
50
|
-
"name": "Alisha Dennis"
|
51
|
-
},
|
52
|
-
{
|
53
|
-
"id": 1,
|
54
|
-
"name": "Rice Henson"
|
55
|
-
},
|
56
|
-
{
|
57
|
-
"id": 2,
|
58
|
-
"name": "Cristina Lee"
|
59
|
-
}
|
60
|
-
],
|
61
|
-
"greeting": "Hello, Cannon Long! You have 4 unread messages.",
|
62
|
-
"favoriteFruit": "strawberry"
|
63
|
-
}
|
64
|
-
]
|
20
|
+
{
|
21
|
+
"judge1": true,
|
22
|
+
"judge2": false,
|
23
|
+
"judge3": true
|
24
|
+
}
|
25
|
+
]
|
26
|
+
|
65
27
|
```
|
66
28
|
### 現状(ロード時)
|
67
|
-
下図は上記のjsonファイルをhttpのGETで取得し、load時にage(表示1)とname(表示2)を取得し表示したものになります。
|
29
|
+
下図は~~上記の~~jsonファイルをhttpのGETで取得し、load時に*age(表示1)と*name(表示2)を取得し表示したものになります。*(1 jsonデータ修正したので対応してません。
|
30
|
+
※urlの部分を自分のローカルで実現したいが実現方法がわからない。
|
31
|
+
|
68
32
|

|
69
33
|
|
70
34
|
|
71
|
-
### 現状のコード
|
35
|
+
### 現状のコード(クライアント)
|
72
36
|
```javascript
|
73
37
|
$(function () {
|
74
38
|
$(window).load(function () {
|
@@ -78,7 +42,7 @@
|
|
78
42
|
// dataでは、フォームの内容をserialize()している
|
79
43
|
// →serialize()の内容は、cs1=custom1&cs2=custom2
|
80
44
|
$.ajax({
|
81
|
-
url: '
|
45
|
+
url: '//////ここを自前でやりたい
|
82
46
|
type: 'GET',
|
83
47
|
datatype: 'json',
|
84
48
|
//2. doneは通信に成功したときに実行される処理
|
@@ -145,19 +109,21 @@
|
|
145
109
|
svgのidとjsonで取得したkeyとvalueを結びつけるところ?で詰まっています。そもそもその前にやることがありますでしょうか。
|
146
110
|
ご教授をお願いいたします。
|
147
111
|
|
112
|
+
### サーバサイドのコードがさっぱり
|
113
|
+
```c#
|
148
|
-
|
114
|
+
[HttpGet]
|
149
|
-
//3.と//4.の間に以下のコードを挿入。恥ずかしい限りですが、調べながら記述したんですが構文が全然わかりません。
|
150
|
-
valメソッドではjsonのデータを取得してsvgのid '#AP_1'にvalueとして設定することはできませんか?これでは#PA_1のvalueに値は入らないでしょうか。加えてif文の判定式についても見ていただきたいです...
|
151
|
-
//取得したageのvalueをrectのid='PA_1'へ設定する
|
152
|
-
```javascript
|
153
|
-
//3.と//4.の間に以下のコードを挿入。
|
154
|
-
|
115
|
+
public ActionResult AjaxTest()
|
155
|
-
|
116
|
+
{
|
156
|
-
|
117
|
+
if (Request.IsAjaxRequest())
|
118
|
+
{
|
119
|
+
|
157
|
-
|
120
|
+
//ここに書く処理が整理できない
|
158
|
-
} else {
|
159
|
-
console.log('緑')
|
160
|
-
|
121
|
+
}
|
122
|
+
return Content("Ajax通信以外のアクセスはできません。");
|
161
|
-
|
123
|
+
}
|
124
|
+
|
125
|
+
|
126
|
+
|
127
|
+
|
162
|
-
|
128
|
+
}
|
163
129
|
```
|
2
コード追記
title
CHANGED
File without changes
|
body
CHANGED
@@ -143,4 +143,21 @@
|
|
143
143
|
</svg>
|
144
144
|
```
|
145
145
|
svgのidとjsonで取得したkeyとvalueを結びつけるところ?で詰まっています。そもそもその前にやることがありますでしょうか。
|
146
|
-
ご教授をお願いいたします。
|
146
|
+
ご教授をお願いいたします。
|
147
|
+
|
148
|
+
### やってみた
|
149
|
+
//3.と//4.の間に以下のコードを挿入。恥ずかしい限りですが、調べながら記述したんですが構文が全然わかりません。
|
150
|
+
valメソッドではjsonのデータを取得してsvgのid '#AP_1'にvalueとして設定することはできませんか?これでは#PA_1のvalueに値は入らないでしょうか。加えてif文の判定式についても見ていただきたいです...
|
151
|
+
//取得したageのvalueをrectのid='PA_1'へ設定する
|
152
|
+
```javascript
|
153
|
+
//3.と//4.の間に以下のコードを挿入。
|
154
|
+
$(function () {
|
155
|
+
var age = $('#AP_1').val(data1[0]["age"]);
|
156
|
+
if (age.val > 41) {
|
157
|
+
console.log('赤')
|
158
|
+
} else {
|
159
|
+
console.log('緑')
|
160
|
+
}
|
161
|
+
});
|
162
|
+
|
163
|
+
```
|
1
誤字修正
title
CHANGED
File without changes
|
body
CHANGED
@@ -8,7 +8,7 @@
|
|
8
8
|
|
9
9
|
### やりたいことと実現イメージ
|
10
10
|
取得したjsonデータの値に応じてsvgの色(fill)を動的に切替えたい。今回は変更ボタンを押した際に変更する。
|
11
|
-
勝手なイメージとしては、画面ロード時にsvgの属性とjsonデータを紐付け、条件式により「gender:male」のときは
|
11
|
+
勝手なイメージとしては、画面ロード時にsvgの属性とjsonデータを紐付け、条件式により「gender:male」のときは図形を青にするなど
|
12
12
|
|
13
13
|
|
14
14
|
|
@@ -64,7 +64,7 @@
|
|
64
64
|
]
|
65
65
|
```
|
66
66
|
### 現状(ロード時)
|
67
|
-
下図は上記のjsonファイルをhttpのGETで取得し、load時にageとnameを取得し表示したものになります。
|
67
|
+
下図は上記のjsonファイルをhttpのGETで取得し、load時にage(表示1)とname(表示2)を取得し表示したものになります。
|
68
68
|

|
69
69
|
|
70
70
|
|