teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

6

コード修正

2018/05/29 05:31

投稿

sanezane
sanezane

スコア91

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
- $(function () {
37
+ $(function () {
38
+ $('#btn1').click(
38
- $(window).load(function () {
39
+ function () {
39
- $("#sample").html("テストを行います");
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: //ここを自前でやりたい(http://localhost:■■■■■■/)?
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[0]["age"]);
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[0]["name"]);
85
+ $("#out5").html(data3["judge2"]);
68
86
 
69
87
  //6. failは、通信に失敗したときに実行される
70
88
  }).fail(function (jqXHR, textStatus, errorThrown) {

5

urlへlocalhostの記述追加

2018/05/29 05:31

投稿

sanezane
sanezane

スコア91

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

コード修正

2018/05/29 04:20

投稿

sanezane
sanezane

スコア91

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
- <form>
110
+ <form>
103
111
  <input type="button" id="change" value="変更">
104
112
  </form>
105
113
  <svg>

3

・環境追加・jsonデータ修正・

2018/05/29 04:07

投稿

sanezane
sanezane

スコア91

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
- 取得したjsonデータの値に応じてsvgの色(fill)を動的に切替えたい。今回は変更ボタンを押した際に変更する。
13
+ 今回は変更ボタンを押した際に変更する。
11
- 勝手なイメージとしては、画面ロード時にsvgの属性とjsonデータを紐付け、条件式により「gender:male」のときは図形を青にするなど
12
14
 
13
15
 
14
-
15
-
16
16
  ### データの形式
17
17
  ```json
18
+ Test.json
18
19
  [
19
- {
20
- "_id": "5b0bc285700e3b01488df059",
21
- "index": 0,
22
- "guid": "8448878e-45a0-4eec-9b63-f3e868c8cdc4",
23
- "isActive": true,
24
- "balance": "$3,782.48",
25
- "picture": "http://placehold.it/32x32",
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
  ![イメージ説明](b6923b1627c36e6e4365ce856f892c26.jpeg)
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: 'http://www.json-generator.com/api/json/get/ceqeVSdYOa?indent=2',
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
- $(function () {
115
+ public ActionResult AjaxTest()
155
- var age = $('#AP_1').val(data1[0]["age"]);
116
+ {
156
- if (age.val > 41) {
117
+ if (Request.IsAjaxRequest())
118
+ {
119
+
157
- console.log('赤')
120
+ //ここに書く処理が整理できない
158
- } else {
159
- console.log('緑')
160
- }
121
+ }
122
+ return Content("Ajax通信以外のアクセスはできません。");
161
- });
123
+ }
124
+
125
+
126
+
127
+
162
-
128
+ }
163
129
  ```

2

コード追記

2018/05/29 04:05

投稿

sanezane
sanezane

スコア91

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

誤字修正

2018/05/28 11:09

投稿

sanezane
sanezane

スコア91

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
  ![イメージ説明](b6923b1627c36e6e4365ce856f892c26.jpeg)
69
69
 
70
70