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

質問編集履歴

3

文章修正

2016/01/20 08:58

投稿

takato
takato

スコア148

title CHANGED
File without changes
body CHANGED
@@ -82,4 +82,6 @@
82
82
 
83
83
  追記
84
84
  $("#button").click()ではなくて、$("#FORM").submit()を試作中です。
85
- これで可能なんでしょうか・・・
85
+ これで可能なんでしょうか・・・
86
+
87
+ またAJAXの部分にdata: $("FORM").serialize(),ではなくdata: $('#FORM').cleanQuery(),を代わりに入力したところ未入力のパラメーターが削除されました!しかし項目してもパラメーターが削除されていました。。。

2

現在の進行状況追加

2016/01/20 08:58

投稿

takato
takato

スコア148

title CHANGED
File without changes
body CHANGED
@@ -78,4 +78,8 @@
78
78
  </form>
79
79
  </body>
80
80
  </html>
81
- ```
81
+ ```
82
+
83
+ 追記
84
+ $("#button").click()ではなくて、$("#FORM").submit()を試作中です。
85
+ これで可能なんでしょうか・・・

1

文章大幅修正

2016/01/20 06:58

投稿

takato
takato

スコア148

title CHANGED
File without changes
body CHANGED
@@ -1,11 +1,8 @@
1
1
  度々お世話になります。
2
2
  様々な方のアドバイスのおかげでようやくAJAXの仕組みがだんだんとわかってきました。
3
+ 入力フォームが未入力の場合jquery.cleanQuery.jsというJSファイルを使用すれば未入力の場合リクエストパラメータから削除されるのが他のHTMLでテストした際に確認できました、ですが今回自分が作成した下記のHTMLだと未入力でもそのままリクエストパラメーターに付与されてしまうためうまくデータが返却されません。入力すればその入力に応じたデータが返却されます。
4
+ どなたかご存知の方宜しく御願いします。
3
5
 
4
- 本題ですが空白時のパラメーターの場合リクエストから省く方法を以前教えていただきました。その際はうまくいったのですが、
5
- 今回自分が作成したAJAXの場合空白時でもリクエストから省かれずに送信されてしまっているのをデペロッパーツールで確認できました。エラーの表示はなくなぜ機能しないのかがわからず質問させていただきます。
6
- 下記のコード以外にも「jquery.cleanQuery.js」
7
- というJSファイルを使用しています。
8
-
9
6
  ```javascript
10
7
  $(function(){
11
8
  $("#button").click( function(){
@@ -21,41 +18,64 @@
21
18
  }).always(function(arg1, status, arg2) {
22
19
  //通信失敗時の処理
23
20
  alert("完了");
24
- });
21
+ });
25
- })
22
+ })
26
- })
23
+ })
24
+
27
- javascript
25
+ /*
26
+ * jQuery cleanQuery 2013-03-23
27
+ * Authored by guimihanui
28
+ * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
29
+ */
30
+
28
- $(function() {
31
+ (function($) {
32
+ function cleanQuery(query) {
33
+ var arr = [];
29
- $('#FORM').on('submit', function(e) {
34
+ $.each(query.split('&'), function(i, param) {
30
- e.preventDefault();
31
- var $form = $(this).clone();
32
- $form.prop('method', $('#method_select').val());
33
- $(this).find(':input').each(function() {
35
+ if (param.split('=')[1]) { arr.push(param); }
34
- var $element = $(this);
35
- if ($element.val() == '') {
36
- $form.find('*[name="' + $element.prop('name') + '"]').remove();
37
- }
38
- });
39
- $form.submit();
40
- });
41
36
  });
37
+ return arr.join('&');
38
+ }
39
+
40
+ $.fn.cleanQuery = function() {
41
+ this.on('submit', function(event) {
42
+ event.preventDefault();
43
+
44
+ var query = cleanQuery($(this).serialize());
45
+ location.href = this.action + '?' + query;
46
+ });
47
+
48
+ return this;
49
+ };
50
+ })(jQuery);
42
51
  ```
43
52
 
44
- ```html
53
+ ```HTML
54
+ <script>
55
+ $(function() {
45
- $('FORM').cleanQuery();
56
+ $('#FORM').cleanQuery();
57
+ });
46
- </script>
58
+ </script>
59
+ </head>
60
+ <title>車種ランキング</title>
61
+ <body>
47
62
  <form id="FORM">
63
+ <br>
48
64
  <b>ランキング種別</b><font color="RED">:必須</font><br>
49
65
  <p><input type="text" value="0" id="kind" name="kind" placeholder="例:0" pattern="^[0-9]+$" class="keyword"></p>
66
+ <b>サイト種別</b><font color="RED">:必須</font><br>
67
+ <p><input type="text" value="0" id="site" name="site" placeholder="例:0" pattern="^[0-9]+$" class="keyword"></p>
50
- <略>
68
+ <b>取得ページ位置</b>
69
+ <p><input type="text" value="" name="page" placeholder="例:1~20" pattern="^[0-9]+$" class="keyword"></p>
51
70
  <b>リクエスト方法</b><br>
52
71
  <select id="method_select">
53
72
  <option value="POST" selected>POST</option>
54
73
  <option value="GET">GET</option>
55
- </form>
56
74
  </select>
57
75
  <button id="button" type="button">検索結果</button></p>
58
76
  </button>
59
77
  <b><textarea id="response" cols=170 rows=19 disabled></textarea></b>
78
+ </form>
60
79
  </body>
80
+ </html>
61
81
  ```