質問編集履歴
4
解決方法について、別の方法があることを記載
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -73,8 +73,8 @@
|
|
|
73
73
|
|
|
74
74
|
よろしくお願いいたします。
|
|
75
75
|
|
|
76
|
-
##追記 解決方法
|
|
76
|
+
##追記 解決方法
|
|
77
|
-
実現は出来ましたが、最適解ではないかもしれません。
|
|
77
|
+
以下コードで実現は出来ましたが、最適解ではないかもしれません。(後述)
|
|
78
78
|
|
|
79
79
|
```JavaScript
|
|
80
80
|
$('form').submit(function(event) {
|
|
@@ -112,4 +112,8 @@
|
|
|
112
112
|
$form.enable();
|
|
113
113
|
});
|
|
114
114
|
});
|
|
115
|
-
```
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
タイトルと異なってしまいますが、元々やりたかったことは、「グループ分けした情報をネストしたJSONで送りたい」となります。
|
|
118
|
+
|
|
119
|
+
ここに載せたコードでは、formを設置し、formから取得した値をjQueryのajaxで送信していますが、フォームを設置せず、「複数の input をグループ分けして、 $('#hoge').click(function(){ でグループのidなどでから内容を取得し、JSONを組み立てて送信する。」という方法の方がシンプルかもしれません。
|
3
解決について補足
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -56,7 +56,6 @@
|
|
|
56
56
|
url: $form.attr('action'),
|
|
57
57
|
type: $form.attr('method'),
|
|
58
58
|
data: tmpData,
|
|
59
|
-
// 間違い dataType:'json',
|
|
60
59
|
timeout: 5000,
|
|
61
60
|
|
|
62
61
|
}).done(function(result, textStatus, xhr){
|
|
@@ -75,7 +74,7 @@
|
|
|
75
74
|
よろしくお願いいたします。
|
|
76
75
|
|
|
77
76
|
##追記 解決方法（仮）
|
|
78
|
-
実現
|
|
77
|
+
実現は出来ましたが、最適解ではないかもしれません。また後で編集する予定です。
|
|
79
78
|
|
|
80
79
|
```JavaScript
|
|
81
80
|
$('form').submit(function(event) {
|
|
@@ -102,8 +101,7 @@
|
|
|
102
101
|
url: $form.attr('action'),
|
|
103
102
|
type: $form.attr('method'),
|
|
104
103
|
data: jsonStr,
|
|
105
|
-
contentType: 'application/json',
|
|
104
|
+
contentType: 'application/json',
|
|
106
|
-
// 間違い dataType:'json',
|
|
107
105
|
timeout: 5000, // 単位はミリ秒
|
|
108
106
|
|
|
109
107
|
}).done(function(result, textStatus, xhr){
|
2
JavaScriptのコードに間違いがあったため修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -46,8 +46,6 @@
|
|
|
46
46
|
event.preventDefault();
|
|
47
47
|
// 操作対象のフォーム要素を取得
|
|
48
48
|
var $form = $(this);
|
|
49
|
-
// 送信ボタンを取得
|
|
50
|
-
var $button = $form.find('button');
|
|
51
49
|
// フォームのデータをDisableにする前に取得
|
|
52
50
|
var tmpData = $form.serializeArray();
|
|
53
51
|
// フォーム無効化
|
|
@@ -58,7 +56,7 @@
|
|
|
58
56
|
url: $form.attr('action'),
|
|
59
57
|
type: $form.attr('method'),
|
|
60
58
|
data: tmpData,
|
|
61
|
-
dataType:'json',
|
|
59
|
+
// 間違い dataType:'json',
|
|
62
60
|
timeout: 5000,
|
|
63
61
|
|
|
64
62
|
}).done(function(result, textStatus, xhr){
|
|
@@ -85,9 +83,6 @@
|
|
|
85
83
|
event.preventDefault();
|
|
86
84
|
// 操作対象のフォーム要素を取得
|
|
87
85
|
var $form = $(this);
|
|
88
|
-
// 送信ボタンを取得
|
|
89
|
-
var $button = $form.find('button');
|
|
90
|
-
|
|
91
86
|
// フォームのデータをDisableにする前に取得
|
|
92
87
|
var className = $form["0"].className; // <---修正部分
|
|
93
88
|
var tmpData = $form.serializeArray();
|
|
@@ -108,7 +103,7 @@
|
|
|
108
103
|
type: $form.attr('method'),
|
|
109
104
|
data: jsonStr,
|
|
110
105
|
contentType: 'application/json', // <---修正部分
|
|
111
|
-
dataType:'json',
|
|
106
|
+
// 間違い dataType:'json',
|
|
112
107
|
timeout: 5000, // 単位はミリ秒
|
|
113
108
|
|
|
114
109
|
}).done(function(result, textStatus, xhr){
|
1
解決方法（仮）の追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -74,4 +74,49 @@
|
|
|
74
74
|
###補足情報
|
|
75
75
|
フォームが複数あり、出来れば、共通のsubmitを使用したいと考えていますが、Web開発は初めてですので、この考え方自体がおかしかったら教えてください。
|
|
76
76
|
|
|
77
|
-
よろしくお願いいたします。
|
|
77
|
+
よろしくお願いいたします。
|
|
78
|
+
|
|
79
|
+
##追記 解決方法（仮）
|
|
80
|
+
実現できたのでそれを記載しますが、回答者さんからの情報で追記するかもしれません。
|
|
81
|
+
|
|
82
|
+
```JavaScript
|
|
83
|
+
$('form').submit(function(event) {
|
|
84
|
+
// HTMLでの送信をキャンセル
|
|
85
|
+
event.preventDefault();
|
|
86
|
+
// 操作対象のフォーム要素を取得
|
|
87
|
+
var $form = $(this);
|
|
88
|
+
// 送信ボタンを取得
|
|
89
|
+
var $button = $form.find('button');
|
|
90
|
+
|
|
91
|
+
// フォームのデータをDisableにする前に取得
|
|
92
|
+
var className = $form["0"].className; // <---修正部分
|
|
93
|
+
var tmpData = $form.serializeArray();
|
|
94
|
+
|
|
95
|
+
// フォーム無効化
|
|
96
|
+
$form.disable();
|
|
97
|
+
|
|
98
|
+
// 修正部分
|
|
99
|
+
var jsonStrBase = '{"' + className + '":{"';
|
|
100
|
+
for(var i in tmpData ){
|
|
101
|
+
jsonStrBase = jsonStrBase + tmpData[i].name + '": "' + tmpData[i].value +'","'
|
|
102
|
+
}
|
|
103
|
+
var jsonStr = jsonStrBase.slice(0, -2) + '}}'
|
|
104
|
+
|
|
105
|
+
// 送信
|
|
106
|
+
$.ajax({
|
|
107
|
+
url: $form.attr('action'),
|
|
108
|
+
type: $form.attr('method'),
|
|
109
|
+
data: jsonStr,
|
|
110
|
+
contentType: 'application/json', // <---修正部分
|
|
111
|
+
dataType:'json',
|
|
112
|
+
timeout: 5000, // 単位はミリ秒
|
|
113
|
+
|
|
114
|
+
}).done(function(result, textStatus, xhr){
|
|
115
|
+
alert('OK');
|
|
116
|
+
}).fail(function(xhr, textStatus, error){
|
|
117
|
+
alert('NG...');
|
|
118
|
+
}).always(function(xhr, textStatus){
|
|
119
|
+
$form.enable();
|
|
120
|
+
});
|
|
121
|
+
});
|
|
122
|
+
```
|