21122


いつもお世話になります。今回画面遷移せずにJSON形式のデータを表示するHTMLを作成しました。

入力フォームが未入力の場合jquery.cleanQuery.jsというJSファイルを使用すれば未入力の場合リクエストパラメータから削除されるのが他のHTMLでテストした際に確認できました、ですが今回自分が作成した下記のHTMLだと未入力でもそのままリクエストパラメーターに付与されてしまうためうまくデータが返却されません。入力すればその入力に応じたデータが返却されます。  
どなたかご存知の方宜しく御願いします。

[code]

    $(function(){
    $("#button").click( function(){
    $.ajax({
     url: 'http://52.192.178.185:8280/api/rankings?',
     type : $("#method_select").val(),
     data: $("FORM").serialize(),
     }).done(function (data, status, xhr) {
      $("#response").html(JSON.stringify(data));
     }).fail(function(xhr, status, error) {
     // 通信失敗時の処理
     alert("失敗");
     }).always(function(arg1, status, arg2) {
     //通信失敗時の処理
     alert("完了");
     });
     })
     })
     
    /*
     * jQuery cleanQuery 2013-03-23
     * Authored by guimihanui
     * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
     */
    
    (function($) {
      function cleanQuery(query) {
        var arr = [];
        $.each(query.split('&'), function(i, param) {
          if (param.split('=')[1]) { arr.push(param); }
        });
        return arr.join('&');
      }
    
      $.fn.cleanQuery = function() {
        this.on('submit', function(event) {
          event.preventDefault();
          
          var query = cleanQuery($(this).serialize());
          location.href = this.action + '?' + query;
        });
        
        return this;
      };
    })(jQuery);
[/code]

[code]

    <script>
     $(function() {
      $('#FORM').cleanQuery();
     });
     </script>
    </head>
    <title>車種ランキング</title>
    <body>
    <form id="FORM">
    <br>
    <b>ランキング種別</b><font color="RED">:必須</font><br>
    <p><input type="text" value="0" id="kind" name="kind" placeholder="例:0" pattern="^[0-9]+$" class="keyword"></p>
    <b>サイト種別</b><font color="RED">:必須</font><br>
    <p><input type="text" value="0" id="site" name="site" placeholder="例:0" pattern="^[0-9]+$" class="keyword"></p>
    <b>取得ページ位置</b>
    <p><input type="text" value="" name="page" placeholder="例:1～20" pattern="^[0-9]+$" class="keyword"></p>
    <b>リクエスト方法</b><br>
    <select id="method_select">
    <option value="POST" selected>POST</option>
    <option value="GET">GET</option>
    </select>
    <button id="button" type="button">検索結果</button></p>
    </button>
    <b><textarea id="response" cols=170 rows=19 disabled></textarea></b>
    </form>
    </body>
    </html>
[/code]


CC BY-SA 3.0
2016-01-20T03:32:47.087
21105
2016-01-20T09:23:56.803
13072
question
javascript html json ajax
空白時のパラメーターを削除することができない。（HTML,AJAX）


問題はボタンのクリックに応じて、AJAXで送信しようとしていることです。  
けれど、その未入力のパラメーターを削除するファンクションはFormがsubmitされた際には動きます。

`$("#button").click()`ではなくて、`$("#FORM").submit()`を利用したらどうでしょうか？

それに、その`cleanQuery()`はGETだけで動きそうだと思います。クエリストリングを利用しているようなのです。


CC BY-SA 3.0
2016-01-20T04:08:57.040
21106
2016-01-20T04:08:57.040
10342
21105
answer

[code]

    <script>
        $(function() {
            $('#FORM').cleanQuery();
        });
    </script>
    
[/code]

これを消して、

[code]

    $.ajax({
        url: 'http://52.192.178.185:8280/api/rankings?',
        type : $("#method_select").val(),
        data: $("FORM").serialize(),
    
[/code]

の`data`部分を

[code]

        data: $('#FORM').cleanQuery(),
    
[/code]

としたらどうでしょうか？


CC BY-SA 3.0
2016-01-20T08:04:43.257
21116
2016-01-20T08:04:43.257
9801
21105
answer


jquery.cleanQuery.js を利用するのはあきらめました。  
ボタンクリック時に、クエリ文字列から値なしのものを除去しています。

[code]

    $(function(){
        $("#button").click( function(){
            var query = $("FORM").serialize();
            var arr = [];
            $.each(query.split('&'), function(i, param) {
                if (param.split('=')[1]) { arr.push(param); }
            });
            var cleaned_query = arr.join('&');
            $.ajax({
                url: 'http://52.192.178.185:8280/api/rankings?',
                type : $("#method_select").val(),
                data: cleaned_query,
    
[/code]


CC BY-SA 3.0
2016-01-20T09:23:56.803
21122
2016-01-20T09:23:56.803
9801
21105
answer