Jquery ajaxSubmit 也做常规表单提交答案

【问题标题】：Jquery ajaxSubmit also does the regular form submitJquery ajaxSubmit 也做常规表单提交
【发布时间】：2012-12-13 03:24:42
【问题描述】：

我正在尝试为我的 Magento 商店之一运行以下 Jquery ajaxSubmit。我使用 ajaxSubmit 因为我还有 2 个文件要从表单上传（意味着我需要 $_FILE 中的数据）。但是，当我执行 ajaxSubmit 时，它还会执行正常的表单提交，这将刷新页面并将我带到下一页，而不是停留在我有一个弹出框的同一页面上，其中包含更多内容。我有 return false; 来防止这种情况发生，但它失败了。提交代码：

$('#quickbuyform').submit(function (){

    // No Accessories: normal submit
    if ($('#accessories ul li').size()==0) {
        return true;
    }

    strName = "<?php echo $_product->getName() ?>";

    // loading message
    $('#pop_accessories_area_message').html("We are adding '"+strName+"' into your shopping cart ...");
    // Pop with loading
    popAccessories();

    // loading icon
    //var dataString = $('#quickbuyform').serialize();
    $.ajaxSubmit({  
          type: "POST",  
          url: $('#quickbuyform').attr('action'),
          data: dataString,  
          beforeSubmit:  showRequest,
          success: function() {
            // display cart link:
            $('#pop_accessories_area_message').html(strName+" was added to <a href='<?php echo $this->getUrl('checkout/cart') ?>'>your shopping cart</a>.");
            $('.pop_accessories_area_button').show();
            //window.location = '<?php //echo $this->getUrl('checkout/cart') ?>';
          }  
        });
    return false;
});

这就是我现在使用e.preventDefault() 所拥有的，但现在它没有提交任何东西。只需停在('#quickbuyform').ajaxSubmit

$('#quickbuyform').submit(function (e){
    e.preventDefault();
    // No Accessories: normal submit
    if ($('#accessories ul li').size()==0) {
        return true;
    }

    strName = "<?php echo $_product->getName() ?>";

    // loading message
    $('#pop_accessories_area_message').html("We are adding '"+strName+"' into your shopping cart ...");
    // Pop with loading
    popAccessories();

    $('#quickbuyform').ajaxSubmit({  
          type: "POST",  
          url: $('#quickbuyform').attr('action'),
          data: dataString,  
          success: function() {
            // display cart link:
            $('#pop_accessories_area_message').html(strName+" was added to <a href='<?php echo $this->getUrl('checkout/cart') ?>'>your shopping cart</a>.");
            $('.pop_accessories_area_button').show();
            //window.location = '<?php echo $this->getUrl('checkout/cart') ?>';
          }  
        });
    return false;
});

【问题讨论】：

如果正确的 url 在表单的action 属性中，则不需要指定url 选项，ajaxSubmit 将默认使用此选项。

标签： ajax magento jquery form-submit

【解决方案1】：

您可以通过调用事件对象的preventDefault方法来停止正常的表单提交。

$('#quickbuyform').submit(function (e) {
    e.preventDefault();
    ...
});

【讨论】：

我试过 e.preventDefault();但是我在函数顶部的语句中停止提交表单，如果我把它放在 return false; 之前，它会正常提交。知道把这句话放在哪里..？？
您应该在顶部添加它。 ajaxSubmit 方法仍应照常提交表单。
是的，我把它放在了顶部，但是之后没有调用 ajaxSubmit ，如果我删除它，ajaxSubmit 会调用但作为正常提交:(
你想写$('#quickbuyform').ajaxSubmit()而不是$.ajaxSubmit()？
在 } 之后添加 )，如 '$('#quickbuyform').submit(function (e) {e.preventDefault();})`

【解决方案2】：

尝试改用 $.ajax，或者按照上面的建议使用 e.preventDefault();：

$.ajax({
          type: "POST",  
          url: $('#quickbuyform').attr('action'),
          data: dataString,  
          beforeSubmit:  showRequest,
          success: function() {
            // display cart link:
            $('#pop_accessories_area_message').html(strName+" was added to <a href='<?php echo $this->getUrl('checkout/cart') ?>'>your shopping cart</a>.");
            $('.pop_accessories_area_button').show();
            //window.location = '<?php //echo $this->getUrl('checkout/cart') ?>';
          }  
});

【讨论】：

$.ajax 不会将文件发布到 $_FILE 数组中......所以我认为 $ajax 不在

【解决方案3】：

你应该试试这样的 -

$("#quickbuyform").submit(function(e){
    e.preventDefault();
  });

这将阻止 jQuery 事件的默认行为。

【讨论】：