$ .post提交表单之前内部Ajax可以运行

问题描述：

我不确定是否它的最佳做法做到这一点，但我有一个内置Ajax $ .post。问题是如果我从$ .post中删除返回false，那么表单将在Ajax运行之前提交。

$(".buy").submit(function(e) { 

    var url = "http://perfectprints.org.uk/Canvas/js/send_email.php"; 

    html2canvas($('.canvas-cut')).then(function(canvas) { 

    $('canvas').addClass('canvas-layout'); 
    var src = canvas.toDataURL(); 
    var output = src.replace(/^data:image\/(png|jpg);base64,/, ""); 
    $.post('image.php', { 
     data: output 
    }).done(function(response) { 
     alert("Done"); 
     $.ajax({ 
     type: "POST", 
     url: url, 
     data: { 
      shape: shape, 
      finish: finish, 
      ori: ori, 
      current_width: current_width, 
      current_height: current_height 
     }, 
     success: function(data) { 
      $('html,body').scrollTop(0); 
     } 
     }); 
    }); 

    }); 
    return false; 
});

这将只适用于如果返回false是为了阻止$ .post射击。我试图尝试提交表单后，Ajax完成，但它不会工作。

任何帮助或建议将是最受欢迎的。

谢谢。

您需要决定想要做什么，发布表单或通过AJAX提交。如果在提交表单之前需要使用AJAX进行某种处理，那么将submit按钮更改为普通按钮，然后执行AJAX调用，并在AJAX返回成功时提交表单。 –

根据你想要完成的事情，你需要'form.submit（）'和/或'event.preventDefault（）'的组合。你可以使用'event.preventDefault（）'来停止提交，当你返回false时它也会自动触发，但不像'return false;'不会中断函数。然后使用'form.submit（）'和任何需要的条件逻辑来手动控制提交。 – mopsyd

更多相关信息，请访问：https：//developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault – mopsyd

答

使用带按钮和ID的按钮。
默认情况下，此元素未提交表单数据，可用于进行Ajax调用。

<button id="button_buy" type="button">Buy</button>

然后添加一个事件点击这个按钮并使用提交事件的实际代码。

$("#button_buy").click(function(e) { 
    //code of $(".buy").submit 

    //inside ajax success fire submit event's form 
    //$('the_form).submit(); 

    //delete return false 
});

我会在这之前给Jorge，谢谢你花时间帮助我。 – Loki180

是不是，我在表单中添加了一个按钮，并在成功时用submit（）重写了$ .post和Ajax中的一些。谢谢大家的帮助。 – Loki180

$ .post提交表单之前内部Ajax可以运行

相关推荐