javascript - 仅使用 jquery 发送特定对象以形成

Question

这个问题与Jquery-Send only some value from a form密切相关。我有一个表格：

<form accept-charset="UTF-8" action="/filter" data-remote="true" method="get">
  <div>
  <div>
    <h2 class="sort">Sort</h2>
    <select class="checkable" id="sort" name="sort">
         <option value='v'>Rank</option>
         <option value='n'>Alphabetical</option>
    </select>
  </div>
  <div>
    <h2 class="tag">Categories</h2>
    <ul>
      <li>
        <input name="category[a]" type="hidden" value="0" />
        <input class="checkable" id="category_a" name="category[a]" type="checkbox" value="1" />
        <span>a</span>
      </li>
      <li>
        <input name="category[adfsadf  fasdf]" type="hidden" value="0" />
        <input class="checkable" id="category_adfsadf  fasdf" name="category[adfsadf  fasdf]" type="checkbox" value="1" />
        <span>adfsadf  fasdf</span>
      </li>
      <li>
        <input name="category[another]" type="hidden" value="0" />
        <input class="checkable" id="category_another" name="category[another]" type="checkbox" value="1" />
        <span>another</span>
      </li>
      <li>
        <input name="category[another tag]" type="hidden" value="0" />
        <input class="checkable" id="category_another tag" name="category[another tag]" type="checkbox" value="1" />
        <span>another tag</span>
      </li>
    </ul>
  </div>
</form>

我只想通过 ajax 发送检查的类别。这是我目前必须从表单中发送所有内容：

 $('.checkable').live('change',
   function() {
     $(this).parents('form:first').submit();
 });

这很好用，但是当类别数量非常多时，请求会不必要地长。我不知道如何为此编写提交功能。或者也许另一种方法更好？提前致谢！

- - - 解决方案 - - -

改用ajax路由

$('.checkable').live('change',
function() {

var dataString = 'sort='+ $('#sort').val();
$('input[type=checkbox]').each(function () {
    if($(this).is(":checked")) {
      dataString += '&'+$(this).prop('name')+'=1';
    }
});
alert
$.ajax({  
  type: "GET",  
  url: "/filter",  
  data: dataString,  
  success: function() {  
  }  
});

});

Answer 1

查看此链接，而不是提交整个表单，只需执行 ajax 发布，并且仅包含您要发送的表单元素。 http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

这是一个示例帖子，您可以轻松地使用选中的选择器仅发送选中的输入

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;  
//alert (dataString);return false;  
$.ajax({  
  type: "POST",  
  url: "bin/process.php",  
  data: dataString,  
  success: function() {  
    $('#contact_form').html("<div id='message'></div>");  
    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    .append("<p>We will be in touch soon.</p>")  
    .hide()  
    .fadeIn(1500, function() {  
      $('#message').append("<img id='checkmark' src='images/check.png' />");  
    });  
  }  
});  
return false;