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

質問編集履歴

4

編集2

2019/02/14 02:39

投稿

uk_63
uk_63

スコア29

title CHANGED
File without changes
body CHANGED
@@ -188,6 +188,7 @@
188
188
  .always(() => {
189
189
  $("#roomForm").attr("disable", false);
190
190
  });
191
+ return false
191
192
  });
192
193
  });
193
194
 
@@ -231,8 +232,6 @@
231
232
  }
232
233
  fmt.Print("バリデーション4 通過\n")
233
234
 
234
- // ここから下がエラーみたいです。
235
-
236
235
  var room model.Room
237
236
  err = json.Unmarshal(body[:length], &room)
238
237
  if err != nil {

3

編集

2019/02/14 02:39

投稿

uk_63
uk_63

スコア29

title CHANGED
File without changes
body CHANGED
@@ -161,21 +161,22 @@
161
161
 
162
162
  ```js
163
163
  // url の指定を変えました。
164
+ // JSON.stringify(data)を付け加えました。
164
165
  // この処理の結果はなぜかfailになります。
165
-
166
166
  $(function () {
167
167
  $("#roomForm").on('submit', function () {
168
168
  $("#roomForm").attr("disable", true);
169
+ let data = {
170
+ title: $("#roomTitle").val(),
171
+ content: $("#roomContent").val()
172
+ };
169
173
  $.ajax({
170
174
  method: 'post',
171
175
  url: '/room/new',
176
+ data:JSON.stringify(data),
172
177
  dataType: 'json',
173
178
  contentType: "application/json",
174
179
  timeout: 10000,
175
- data: {
176
- "title": $("#roomTitle").val(),
177
- "content": $("#roomContent").val()
178
- }
179
180
  })
180
181
  .done((data) => {
181
182
  alert(data);
@@ -190,10 +191,10 @@
190
191
  });
191
192
  });
192
193
 
194
+
193
195
  ```
194
196
 
195
- Goのコードも変えて細かくバリデーションをつけるように変えました。
196
- コードのバリデーション4までは通過しま
197
+ すべてのバリデーション通過し成功しした
197
198
 
198
199
  ```go
199
200
  func roomCreate(w http.ResponseWriter, r *http.Request) {

2

コード変更

2019/02/14 02:35

投稿

uk_63
uk_63

スコア29

title CHANGED
File without changes
body CHANGED
@@ -139,7 +139,115 @@
139
139
 
140
140
  ```
141
141
 
142
+ # コード(追記2)
142
143
 
144
+ フォームから送信すると、以前まで成功していたのが`$.ajax`の結果が`fail`になっています。HTML, JSのコードがおかしくないかみていただけますか?
145
+
146
+ ```html
147
+ // actionの指定を消しました。 enctypeを追加しました。
148
+
149
+ <form id="roomForm" enctype="application/json" method="post">
150
+ <div class="form-group">
151
+ <label>掲示板の名前</label>
152
+ <input type="text" name="title" value="Go言語コミュニティ" id="roomTitle" class="form-control">
153
+ </div>
154
+ <div class="form-group">
155
+ <label>掲示板の説明</label>
156
+ <textarea name="content" rows="3" id="roomContent" class="form-control"></textarea>
157
+ </div>
158
+ <button type="submit">作成する</button>
159
+ </form>
160
+ ```
161
+
162
+ ```js
163
+ // url の指定を変えました。
164
+ // この処理の結果はなぜかfailになります。
165
+
166
+ $(function () {
167
+ $("#roomForm").on('submit', function () {
168
+ $("#roomForm").attr("disable", true);
169
+ $.ajax({
170
+ method: 'post',
171
+ url: '/room/new',
172
+ dataType: 'json',
173
+ contentType: "application/json",
174
+ timeout: 10000,
175
+ data: {
176
+ "title": $("#roomTitle").val(),
177
+ "content": $("#roomContent").val()
178
+ }
179
+ })
180
+ .done((data) => {
181
+ alert(data);
182
+ })
183
+ .fail((data) => {
184
+ alert("ERROR");
185
+ alert(data);
186
+ })
187
+ .always(() => {
188
+ $("#roomForm").attr("disable", false);
189
+ });
190
+ });
191
+ });
192
+
193
+ ```
194
+
195
+ Goのコードも変えて細かくバリデーションをつけるように変えました。
196
+ このコードのバリデーション4までは通過します。
197
+
198
+ ```go
199
+ func roomCreate(w http.ResponseWriter, r *http.Request) {
200
+ fmt.Print("roomCreate is starting!!\n")
201
+ // validation
202
+ if r.Method != "POST" {
203
+ fmt.Printf("メソッド : \n%v\n", r.Method)
204
+ w.WriteHeader(http.StatusBadRequest)
205
+ return
206
+ }
207
+ fmt.Print("バリデーション1 通過\n")
208
+
209
+ if r.Header.Get("Content-Type") != "application/json" {
210
+ fmt.Printf("レスポンスヘッダー : \n%v\n", r.Header.Get("Content-Type"))
211
+ w.WriteHeader(http.StatusBadRequest)
212
+ return
213
+ }
214
+ fmt.Print("バリデーション2 通過\n")
215
+
216
+ //To allocate slice for request body
217
+ length, err := strconv.Atoi(r.Header.Get("Content-Length"))
218
+ if err != nil {
219
+ fmt.Printf("コンテンツレングス : \n%v\n", r.Header.Get("Content-Length"))
220
+ w.WriteHeader(http.StatusInternalServerError)
221
+ return
222
+ }
223
+ fmt.Print("バリデーション3 通過\n")
224
+
225
+ body := make([]byte, length)
226
+ length, err = r.Body.Read(body)
227
+ if err != nil && err != io.EOF {
228
+ w.WriteHeader(http.StatusInternalServerError)
229
+ return
230
+ }
231
+ fmt.Print("バリデーション4 通過\n")
232
+
233
+ // ここから下がエラーみたいです。
234
+
235
+ var room model.Room
236
+ err = json.Unmarshal(body[:length], &room)
237
+ if err != nil {
238
+ w.WriteHeader(http.StatusInternalServerError)
239
+ return
240
+ }
241
+ fmt.Print("バリデーション5 通過\n")
242
+ fmt.Printf("%v\n", room)
243
+ w.WriteHeader(http.StatusOK)
244
+ http.Redirect(w, r, "/room", 302)
245
+ }
246
+
247
+ ```
248
+
249
+
250
+
143
251
  # 質問
144
252
 
145
253
  #### なぜJSONをサーバー側で受け取れていないんでしょうか?

1

追記

2019/02/14 02:29

投稿

uk_63
uk_63

スコア29

title CHANGED
@@ -1,1 +1,1 @@
1
- 「Go言語」フォームのデータをJSONで送信たい
1
+ 「Go言語」フォームから送信されJSONをサーバー側で受け取れな..............
body CHANGED
@@ -16,11 +16,90 @@
16
16
  こちらの記事「[jQueryでJSONをPOSTしてJSONのレスポンスを受け取る](https://www.walbrix.co.jp/blog/2013-08-jquery-json-post.html)」を参考にしてJSONをフォームからの送信を試みましたが、失敗しました。
17
17
 
18
18
 
19
- # コード(質問用に整形して書いています)
19
+ # コード(追記 2/14)
20
20
 
21
- このコドのままだとフォから送信されたデータはJSONではないため失敗します現状共有します。
21
+ クライアント側で、JSONデタをアラトで出すようにしたところ、クライアントから送信されたデータはJSONに変換されています。しかしサーバー(GO)でそのJSON受け取ってコンソールに出力ようとしたら、エラーが出ています。
22
22
 
23
+
24
+
25
+ レスポンスのボディを出力するように`fmt.Print(r.Body)`とした結果が下記です。
26
+
27
+ ```
28
+ &{0xc0000aa520 <nil> <nil> false true {0 0} false false false 0x129bc20}
29
+ ```
30
+
31
+ またそのデータをデコードした結果、出力されたエラーが下記です。
32
+
33
+ ```
34
+ invalid character 'i' in literal true (expecting 'r')
35
+ ```
36
+
37
+ デコードしているGoのコード
38
+
23
39
  ```go
40
+ func roomCreate(w http.ResponseWriter, r *http.Request) {
41
+ var room model.Room
42
+ if r.Body == nil {
43
+ fmt.Printf("レスポンスボディは空です。\n")
44
+ }
45
+ err := json.NewDecoder(r.Body).Decode(&room)
46
+ if err != nil {
47
+ fmt.Printf("エラー内容\n「%v」\n", err)
48
+ }
49
+ fmt.Printf("データ\n%v\n", room)
50
+ http.Redirect(w, r, "/room", 302)
51
+ }
52
+ ```
53
+
54
+ 下記が全体のコードになります。
55
+
56
+ ```html
57
+ <form id="roomForm" method="POST" action="/room/new">
58
+ <div class="form-group">
59
+ <label>掲示板の名前</label>
60
+ <input type="text" name="title" id="roomTitle" class="form-control">
61
+ </div>
62
+ <div class="form-group">
63
+ <label>掲示板の説明</label>
64
+ <textarea name="content" rows="3" id="roomContent" class="form-control"></textarea>
65
+ </div>
66
+ <button type="submit">作成する</button>
67
+ </form>
68
+ ```
69
+
70
+ ```js
71
+ $(function () {
72
+ $("#roomForm").on('submit', function () {
73
+ $("#roomForm").attr("disable", true);
74
+ $.ajax({
75
+ method: 'POST',
76
+ url: '/routes_room.go',
77
+ contentType: 'application/json',
78
+ dataType: 'JSON',
79
+ scriptCharset: 'utf-8',
80
+ cache: 'false',
81
+ timeout: 10000,
82
+ data: {
83
+ "title": $("#roomTitle").val(),
84
+ "content": $("#roomContent").val()
85
+ }
86
+ })
87
+ .done((data) => {
88
+ alert(data)
89
+ })
90
+ .fail((data) => {
91
+ alert(data)
92
+ })
93
+ .always(() => {
94
+ $("#roomForm").attr("disable", false);
95
+ });
96
+ });
97
+ });
98
+
99
+
100
+ ```
101
+
102
+ ```go
24
103
  type Room struct {
25
104
  ID int `json:"id"`
26
105
  Title string `json:"subject"`
@@ -60,21 +139,7 @@
60
139
 
61
140
  ```
62
141
 
63
- ```html
64
- <form method="POST" action="/room/new">
65
- <div class="form-group">
66
- <label>掲示板の名前</label>
67
- <input type="text" name="title" id="roomTitle" class="form-control">
68
- </div>
69
- <div class="form-group">
70
- <label>掲示板の説明</label>
71
- <textarea name="content" rows="3" id="roomContent" class="form-control"></textarea>
72
- </div>
73
- <button type="submit">作成する</button>
74
- </form>
75
- ```
76
142
 
77
143
  # 質問
78
- #### GO言語を使っている皆様はブラウザのフォームから送信されたデータをどのようにJSONへ変換されていますか?
79
144
 
80
- 回答お待ちしおります。よろしくおねがいします!
145
+ #### なぜJSONをサーバー側で受け取れていないんでょうか?