質問編集履歴

3

文章修正

2016/01/20 08:58

投稿

takato
takato

スコア148

test CHANGED
File without changes
test CHANGED
@@ -167,3 +167,7 @@
167
167
  $("#button").click()ではなくて、$("#FORM").submit()を試作中です。
168
168
 
169
169
  これで可能なんでしょうか・・・
170
+
171
+
172
+
173
+ またAJAXの部分にdata: $("FORM").serialize(),ではなくdata: $('#FORM').cleanQuery(),を代わりに入力したところ未入力のパラメーターが削除されました!しかし項目してもパラメーターが削除されていました。。。

2

現在の進行状況追加

2016/01/20 08:58

投稿

takato
takato

スコア148

test CHANGED
File without changes
test CHANGED
@@ -159,3 +159,11 @@
159
159
  </html>
160
160
 
161
161
  ```
162
+
163
+
164
+
165
+ 追記
166
+
167
+ $("#button").click()ではなくて、$("#FORM").submit()を試作中です。
168
+
169
+ これで可能なんでしょうか・・・

1

文章大幅修正

2016/01/20 06:58

投稿

takato
takato

スコア148

test CHANGED
File without changes
test CHANGED
@@ -2,15 +2,9 @@
2
2
 
3
3
  様々な方のアドバイスのおかげでようやくAJAXの仕組みがだんだんとわかってきました。
4
4
 
5
+ 入力フォームが未入力の場合jquery.cleanQuery.jsというJSファイルを使用すれば未入力の場合リクエストパラメータから削除されるのが他のHTMLでテストした際に確認できました、ですが今回自分が作成した下記のHTMLだと未入力でもそのままリクエストパラメーターに付与されてしまうためうまくデータが返却されません。入力すればその入力に応じたデータが返却されます。
5
6
 
6
-
7
- 本題ですが空白時のパラメーターの場合リクエストから省く方法を以前教えていただきました。その際はうまくいったのですが、
8
-
9
- 今回自分が作成したAJAXの場合空白時でもリクエストから省かれずに送信されてしまっているのをデペロッパーツールで確認できました。エラーの表示はなくなぜ機能しないのかがわからず質問させていただきます。
10
-
11
- 下記のコード以外にも「jquery.cleanQuery.js」
12
-
13
- うJSファイルを使用ています。
7
+ どなたかご存知の方宜しく御願いします。
14
8
 
15
9
 
16
10
 
@@ -44,59 +38,103 @@
44
38
 
45
39
  alert("完了");
46
40
 
47
- });
41
+ });
48
42
 
49
- })
43
+ })
50
44
 
51
- })
45
+ })
52
46
 
53
- javascript
47
+
54
48
 
55
- $(function() {
49
+ /*
56
50
 
57
- $('#FORM').on('submit', function(e) {
51
+ * jQuery cleanQuery 2013-03-23
58
52
 
59
- e.preventDefault();
53
+ * Authored by guimihanui
60
54
 
61
- var $form = $(this).clone();
55
+ * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
62
56
 
63
- $form.prop('method', $('#method_select').val());
57
+ */
64
58
 
65
- $(this).find(':input').each(function() {
66
59
 
67
- var $element = $(this);
68
60
 
69
- if ($element.val() == '') {
61
+ (function($) {
70
62
 
71
- $form.find('*[name="' + $element.prop('name') + '"]').remove();
63
+ function cleanQuery(query) {
72
64
 
73
- }
65
+ var arr = [];
74
66
 
75
- });
67
+ $.each(query.split('&'), function(i, param) {
76
68
 
77
- $form.submit();
69
+ if (param.split('=')[1]) { arr.push(param); }
78
-
79
- });
80
70
 
81
71
  });
72
+
73
+ return arr.join('&');
74
+
75
+ }
76
+
77
+
78
+
79
+ $.fn.cleanQuery = function() {
80
+
81
+ this.on('submit', function(event) {
82
+
83
+ event.preventDefault();
84
+
85
+
86
+
87
+ var query = cleanQuery($(this).serialize());
88
+
89
+ location.href = this.action + '?' + query;
90
+
91
+ });
92
+
93
+
94
+
95
+ return this;
96
+
97
+ };
98
+
99
+ })(jQuery);
82
100
 
83
101
  ```
84
102
 
85
103
 
86
104
 
87
- ```html
105
+ ```HTML
88
106
 
89
- $('FORM').cleanQuery();
107
+ <script>
90
108
 
109
+ $(function() {
110
+
111
+ $('#FORM').cleanQuery();
112
+
113
+ });
114
+
91
- </script>
115
+ </script>
116
+
117
+ </head>
118
+
119
+ <title>車種ランキング</title>
120
+
121
+ <body>
92
122
 
93
123
  <form id="FORM">
124
+
125
+ <br>
94
126
 
95
127
  <b>ランキング種別</b><font color="RED">:必須</font><br>
96
128
 
97
129
  <p><input type="text" value="0" id="kind" name="kind" placeholder="例:0" pattern="^[0-9]+$" class="keyword"></p>
98
130
 
131
+ <b>サイト種別</b><font color="RED">:必須</font><br>
132
+
133
+ <p><input type="text" value="0" id="site" name="site" placeholder="例:0" pattern="^[0-9]+$" class="keyword"></p>
134
+
99
- <略>
135
+ <b>取得ページ位置</b>
136
+
137
+ <p><input type="text" value="" name="page" placeholder="例:1~20" pattern="^[0-9]+$" class="keyword"></p>
100
138
 
101
139
  <b>リクエスト方法</b><br>
102
140
 
@@ -106,8 +144,6 @@
106
144
 
107
145
  <option value="GET">GET</option>
108
146
 
109
- </form>
110
-
111
147
  </select>
112
148
 
113
149
  <button id="button" type="button">検索結果</button></p>
@@ -116,6 +152,10 @@
116
152
 
117
153
  <b><textarea id="response" cols=170 rows=19 disabled></textarea></b>
118
154
 
155
+ </form>
156
+
119
157
  </body>
120
158
 
159
+ </html>
160
+
121
161
  ```