Ajax 調用功能 - 有條件地觸發 Facebook 像素並重定向到感謝頁面

Question

我很難讓表單上的 Ajax 調用請求的這部分正常工作。 一個基本的重定向功能一直在工作，但是我正在嘗試更新該功能，以根據表單中下拉列表中的用戶輸入值有條件地觸發 Facebook 像素。 下面是相關的html和ajax調用函數：

這是 HTML 下拉菜單

 <label for="homeowner">Are you a homeowner?</label>
    <select id="rentorown" name="homeowner" required >
    <option value=""></option>
      <option value="own">Yes, I own my home.</option>
      <option value="rent">No, I rent.</option>
    </select>    

這是ajax調用

$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url:'https://hooks.zapier.com/hooks/catch',
        type:'post',
        data:$('#myForm').serialize(),
        success:function fbpixel(){
         var own = document.getElementById("rentorown").value;   

  if (own ==="own") {
 fbq('track', 'Lead'); 
 window.top.location = "https://www.sampleurl.com/thankyou";
} else {
  fbq('track', 'AddToCart');
  window.top.location = "https://www.sampleurl.com/thankyou";
}

        }
    });
}); 

上面的調用函數正確地將潛在客戶提交數據發布到 zapier，但是，像素不會有條件地觸發，也不會重定向頁面。

您對如何使用 ajax 調用函數正確完成上述操作有什么建議嗎？

謝謝！

Answer 1

從您的代碼中刪除fbpixel ，它應該可以工作：

success: function () {
  // your function code
}

Answer 2

您可以嘗試像這樣承諾 Ajax 調用：

function afterAjax() {
  return new Promise((resolve, reject) => {
    $('#myForm').submit(function(e){
      e.preventDefault();
      $.ajax({
        url: 'https://hooks.zapier.com/hooks/catch',
        type: 'post',
        data: $('#myForm').serialize(),
        success: function(data) {
          resolve(data)
        },
        error: function(error) {
          reject(error)
        }
    });
}); 


afterAjax().then(data => {

  var own = document.getElementById("rentorown").value;   

  if (own ==="own") {
    fbq('track', 'Lead'); 
    window.top.location = "https://www.sampleurl.com/thankyou";
  } else {
    fbq('track', 'AddToCart');
    window.top.location = "https://www.sampleurl.com/thankyou";
  }

}).catch(error => {
   console.log(error)
})