如何使用 GET 方法更改 URL 形式？答案

【问题标题】：How to change URL form with GET method?如何使用 GET 方法更改 URL 形式？
【发布时间】：2015-06-10 03:40:06
【问题描述】：

表格：

<form action="/test" method="GET">
    <input name="cat3" value="1" type="checkbox">
    <input name="cat3" value="5" type="checkbox">
    <input name="cat3" value="8" type="checkbox">
    <input name="cat3" value="18" type="checkbox">
    <input type="submit" value="SUBMIT">
</form>

如何用GET方法改变URL形式？

之前：test?cat3=1&cat3=5&cat3=8&cat3=18

之后：test?cat3=1,5,8,18

我想使用 jQuery。

非常感谢！

【问题讨论】：

你需要 JavaScript。你可以使用 jQuery（它会更容易）吗？
哦，对不起，我不清楚。我想使用 jquery。
您应该重新标记您的问题以包含 jQuery。 :)

标签： forms url methods get

【解决方案1】：

给你！此示例使用 jQuery，将在您提出问题时抓取您的表单元素，并对所需的 URL 执行 GET 请求。您可能会注意到编码为“%2C”的逗号 - 但是当您在服务器端读取数据时，这些逗号会自动为您解码。

$(document).ready(function(){
  $('#myForm').submit(function() {
    // Create our form object. You could optionally serialize our whole form here if there are additional parameters in the form you want
    var params = {
      "cat3":""
    };
    
    // Loop through the checked items named cat3 and add to our param string
    $(this).children('input[name=cat3]:checked').each(function(i,obj){
      if( i > 0 ) params.cat3 += ',';
      params.cat3 += $(obj).val();
    });
    
    // "submit" our form by going to the properly formed GET url
    var url = $(this).attr('action') + '?' + $.param( params );

    // Sample alert you can remove
    alert( "This form will now GET the URL: " + url );

    // Perform the submission
    window.location.href = url;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/test" method="GET" id="myForm">
    <input name="cat3" value="1" type="checkbox">
    <input name="cat3" value="5" type="checkbox">
    <input name="cat3" value="8" type="checkbox">
    <input name="cat3" value="18" type="checkbox">
    <input type="submit" value="SUBMIT">
</form>

【讨论】：

非常感谢@Scott 'scm6079'

【解决方案2】：

我的朋友找到了解决办法：

$(document).ready(function() {      
  // Change Url Form: &cat3=0&cat3=1&cat3=2 -> &cat3=0,1,2
  var changeUrlForm = function(catName){
    $('form').on('submit', function(){
      var myForm = $(this);
      var checkbox = myForm.find("input[type=checkbox][name="+ catName +"]");
      var catValue = '';
      checkbox.each(function(index, element) {
        var name = element.name;
        var value = element.value;
        if (element.checked) {
          if (catValue === '') {
            catValue += value;
          } else {
            catValue += '&sbquo;' + value;
          }
          element.disabled = true;
        }
      });

      if (catValue !== '') {
        myForm.append('<input type="hidden" name="' + catName + '" value="' + catValue + '" />');
      }
    });
  };

  // Press 'Enter' key
  $('.search-form .inputbox-search').keypress(function(e) {
    if (e.which == 13) {
      changeUrlForm('cat3');
      changeUrlForm('cat4');
      alert(window.location.href);
    }
  });

  // Click to submit button
  $('.search-form .btn-submit').on('click', function() {
    changeUrlForm('cat3');
    changeUrlForm('cat4');
    alert(window.location.href);
    $(".search-form").submit();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/test" method="GET" class="search-form">
    <input name="cat3" value="1" type="checkbox">1  
    <input name="cat3" value="3" type="checkbox">3  
    <input name="cat3" value="5" type="checkbox">5  
    <input name="cat3" value="7" type="checkbox">7  
		<br />
    <input name="cat4" value="2" type="checkbox">2  
    <input name="cat4" value="4" type="checkbox">4  
    <input name="cat4" value="6" type="checkbox">6  

    <br />
    <br />
    <a href="#" class="btn-submit">Submit</a>
    <br />
    <br />
    <input type="text" placeholder="Search" class="inputbox-search" /> 
</form>

【讨论】：