質問編集履歴

4

解決方法について、別の方法があることを記載

2017/11/29 02:16

投稿

hiroki_s
hiroki_s

スコア13

test CHANGED
File without changes
test CHANGED
@@ -148,9 +148,9 @@
148
148
 
149
149
 
150
150
 
151
- ##追記 解決方法(仮)
151
+ ##追記 解決方法
152
-
152
+
153
- 実現は出来ましたが、最適解ではないかもしれません。またで編集する予定です。
153
+ 以下コードで実現は出来ましたが、最適解ではないかもしれません。(述)
154
154
 
155
155
 
156
156
 
@@ -227,3 +227,11 @@
227
227
  });
228
228
 
229
229
  ```
230
+
231
+
232
+
233
+ タイトルと異なってしまいますが、元々やりたかったことは、「グループ分けした情報をネストしたJSONで送りたい」となります。
234
+
235
+
236
+
237
+ ここに載せたコードでは、formを設置し、formから取得した値をjQueryのajaxで送信していますが、フォームを設置せず、「複数の input をグループ分けして、 $('#hoge').click(function(){ でグループのidなどでから内容を取得し、JSONを組み立てて送信する。」という方法の方がシンプルかもしれません。

3

解決について補足

2017/11/29 02:16

投稿

hiroki_s
hiroki_s

スコア13

test CHANGED
File without changes
test CHANGED
@@ -114,8 +114,6 @@
114
114
 
115
115
  data: tmpData,
116
116
 
117
- // 間違い dataType:'json',
118
-
119
117
  timeout: 5000,
120
118
 
121
119
 
@@ -152,7 +150,7 @@
152
150
 
153
151
  ##追記 解決方法(仮)
154
152
 
155
- 実現できのでそれを記載しますが、回答者さんからの情報追記するかもしれません。
153
+ 実現は出来ましたが、最適解はないかもしれません。また後で編集する予定です。
156
154
 
157
155
 
158
156
 
@@ -206,9 +204,7 @@
206
204
 
207
205
  data: jsonStr,
208
206
 
209
- contentType: 'application/json', // <---修正部分
207
+ contentType: 'application/json',
210
-
211
- // 間違い dataType:'json',
212
208
 
213
209
  timeout: 5000, // 単位はミリ秒
214
210
 

2

JavaScriptのコードに間違いがあったため修正

2017/11/17 09:08

投稿

hiroki_s
hiroki_s

スコア13

test CHANGED
File without changes
test CHANGED
@@ -94,10 +94,6 @@
94
94
 
95
95
  var $form = $(this);
96
96
 
97
- // 送信ボタンを取得
98
-
99
- var $button = $form.find('button');
100
-
101
97
  // フォームのデータをDisableにする前に取得
102
98
 
103
99
  var tmpData = $form.serializeArray();
@@ -118,7 +114,7 @@
118
114
 
119
115
  data: tmpData,
120
116
 
121
- dataType:'json',
117
+ // 間違い dataType:'json',
122
118
 
123
119
  timeout: 5000,
124
120
 
@@ -172,12 +168,6 @@
172
168
 
173
169
  var $form = $(this);
174
170
 
175
- // 送信ボタンを取得
176
-
177
- var $button = $form.find('button');
178
-
179
-
180
-
181
171
  // フォームのデータをDisableにする前に取得
182
172
 
183
173
  var className = $form["0"].className; // <---修正部分
@@ -218,7 +208,7 @@
218
208
 
219
209
  contentType: 'application/json', // <---修正部分
220
210
 
221
- dataType:'json',
211
+ // 間違い dataType:'json',
222
212
 
223
213
  timeout: 5000, // 単位はミリ秒
224
214
 

1

解決方法(仮)の追記

2017/11/16 09:26

投稿

hiroki_s
hiroki_s

スコア13

test CHANGED
File without changes
test CHANGED
@@ -151,3 +151,93 @@
151
151
 
152
152
 
153
153
  よろしくお願いいたします。
154
+
155
+
156
+
157
+ ##追記 解決方法(仮)
158
+
159
+ 実現できたのでそれを記載しますが、回答者さんからの情報で追記するかもしれません。
160
+
161
+
162
+
163
+ ```JavaScript
164
+
165
+ $('form').submit(function(event) {
166
+
167
+ // HTMLでの送信をキャンセル
168
+
169
+ event.preventDefault();
170
+
171
+ // 操作対象のフォーム要素を取得
172
+
173
+ var $form = $(this);
174
+
175
+ // 送信ボタンを取得
176
+
177
+ var $button = $form.find('button');
178
+
179
+
180
+
181
+ // フォームのデータをDisableにする前に取得
182
+
183
+ var className = $form["0"].className; // <---修正部分
184
+
185
+ var tmpData = $form.serializeArray();
186
+
187
+
188
+
189
+ // フォーム無効化
190
+
191
+ $form.disable();
192
+
193
+
194
+
195
+ // 修正部分
196
+
197
+ var jsonStrBase = '{"' + className + '":{"';
198
+
199
+ for(var i in tmpData ){
200
+
201
+ jsonStrBase = jsonStrBase + tmpData[i].name + '": "' + tmpData[i].value +'","'
202
+
203
+ }
204
+
205
+ var jsonStr = jsonStrBase.slice(0, -2) + '}}'
206
+
207
+
208
+
209
+ // 送信
210
+
211
+ $.ajax({
212
+
213
+ url: $form.attr('action'),
214
+
215
+ type: $form.attr('method'),
216
+
217
+ data: jsonStr,
218
+
219
+ contentType: 'application/json', // <---修正部分
220
+
221
+ dataType:'json',
222
+
223
+ timeout: 5000, // 単位はミリ秒
224
+
225
+
226
+
227
+ }).done(function(result, textStatus, xhr){
228
+
229
+ alert('OK');
230
+
231
+ }).fail(function(xhr, textStatus, error){
232
+
233
+ alert('NG...');
234
+
235
+ }).always(function(xhr, textStatus){
236
+
237
+ $form.enable();
238
+
239
+ });
240
+
241
+ });
242
+
243
+ ```