如何知道表单是否真的被序列化了？

Question

单击提交按钮后，我有此表单要序列化，

   <form class="cashier_forms" action="<?php echo base_url().'index.php/'.$this->uri->segment(1).'/'.$this->uri->segment(2)?>/addCashierCount" id="form_cashier_count" rel="ajax_message">
       <p id="cashier_count_p" class="hidden">
          <label for="recipe_id">Count</label>
          <input placeholder="Cashier count for this Recipe" class="all_curve_small cashier_inputs" name="cashier_count" id="cashier_id" />
          <input id="yield_recipe_id" type="text" name="yield_id_input" value="<?php echo $ayr_recipe->yieldID?>" />
          <input type="text" name="count_date" value="<?php echo $date_now?>" />
          <input type="submit" class="buttons count_submit" rel="form_<?php echo $this->tbl_count_name ?>" value="Add Count" />
       </p>
    </form>

这是我的 jquery，据说可以序列化我的表单..

   $('.count_submit').click(function(e){
      e.preventDefault();
      var form    = '#'+ $(this).attr('rel');
      var url  = $(form).attr('action');
      var target  = '#'+ $(form).attr('rel');
      $(target).slideUp();
      $.post(url, $(form).serialize(),function(data) {
         $(target).html(data).slideDown(function(){
            if(data == '<div class="ok">Added</div>'){
            setTimeout(refresh,3000)
            window.location = '<?php echo base_url()?>index.php/cashier/cashier_lo';
            }
         });
      });
    });

但是在处理操作时，它不存储任何数据，我认为表单没有被序列化..有人可以检查我是否错过了 sumthing 吗？

Answer 1

这不会给你表格：

var form = '#'+ $(this).attr('rel');

这为您提供了提交按钮的rel 属性（顺便说一句，它甚至没有这样的属性）。然后在上面调用.serialize()方法就没有意义了。访问表格。请记住，在您的点击处理程序中， this 指向被点击的元素（也就是按钮，而不是表单）。所以：

var form = $(this).closest('form');

据说更好的是订阅表单的提交事件，而不是按钮的点击事件。如果用户在输入字段内按 Enter 会怎样？表单将被提交，您的点击处理程序将永远不会运行。

所以让我们清理一下吧：

$('#form_cashier_count').submit(function(e) {
    e.preventDefault();
    var form = $(this);
    var target = form.attr('rel');
    $(target).slideUp();
    $.post(this.action, form.serialize(), function(data) {
        $(target).html(data).slideDown(function() {
            if (data == '<div class="ok">Added</div>') {
                setTimeout(refresh, 3000);
                window.location = '<?php echo base_url()?>index.php/cashier/cashier_lo';
            }
        });
    });
});