Question

我有一个html页面，其中包含一个按钮，该按钮是“添加到购物车”按钮。单击此按钮后，页面将重新路由到购物车。

<button type="submit" name="add" class="action_button add_to_cart" onclick="return postScreenShot()" data-label="Add to Cart"><span class="text">Add to Cart</span></button>

我需要做的是，当用户单击此按钮时，将执行方法postScreenShot。

postscreenShot方法包含：

function postScreenShot() {
    'https://example.com/'+previewImageId+'.png');
    var productName = $(".product_name").text();
    var customText = $("#user_input").val();
    var secondCustomText = $("#second_user_input").val();
    var getImage = $("#img_preview_fancybox div").find("img").attr("src");
    var licensePlateImage = getImage.replace('https://example.com/preview/img/','');

    $.ajax({
        type: 'POST',
        data: {
            firstLine: customText,
            secondLine: secondCustomText,
            previewId: previewImageId,
            prodName: productName
        },
        url: 'https://example.com/doit',
    }); 
}

我需要的是整个方法都可以运行，但是似乎正在发生的问题是页面在方法完成之前重新路由。

我所做的只是放在这里，希望它能运行我的方法，并等待它返回。

onClick="return postScreenShot()"

执行此操作的正确方法是什么？还是不可能？

Answer 1

您可以使用done回调在POST完成后进行导航。

<button ... onclick="postScreenShot(event)">

function postScreenShot(event) {
  event.preventDefault(); // <-- prevent default action

  'https://example.com/'+previewImageId+'.png');
  var productName = $(".product_name").text();
  var customText = $("#user_input").val();
  var secondCustomText = $("#second_user_input").val();
  var getImage = $("#img_preview_fancybox div").find("img").attr("src");
  var licensePlateImage = getImage.replace('https://example.com/preview/img/','');


  $.ajax({
     type: 'POST',
     data: {firstLine: customText,
            secondLine: secondCustomText,
            previewId: previewImageId,
             prodName: productName
           },
     url: 'https://example.com/doit',
   }).done(function () { $("#form-selector").submit();  });  // <-- submit the form on done
};

按下按钮并更改页面时执行完整的js功能

1 个答案: