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

时间:2017-11-17 23:21:46

标签: javascript jquery ajax forms

我不确定这是否是最好的做法,但我的内部有一个带有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完成后尝试提交表单,但它不会工作。

非常欢迎任何帮助或建议。

谢谢。

1 个答案:

答案 0 :(得分:1)

使用带有按钮和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
});