[Products from Feitian Benyue] After Ajax submits data, a new window is opened and intercepted by the browser Summary

1. Scenario:

On the order confirmation page of the official mall, 确认订单when you click the button, you need to go through the following code process

ajax submit data to create order
If the previous order is successfully created, jump to the payment channel to pay

2. Questions

But using the following codes, occasionally (not every time) will be intercepted by the browser

2.1 After ajax, use window.open(url) directly

slightly

2.2 After ajax, the form is submitted

Example:

Put a form on the page

  <form id="payForm" action="/payment/goToPaymentDirect.htm" target="_blank">
     <input type="hidden" name="subOrdinate" id="subOrdinate" value="" />
     <input type="hidden" name="payType" id="payType" value="" />
   </form>

After ajax gets the result, attach the relevant hidden value and submit the form

$('#subOrdinate').val(subOrdinate);
  $('#payType').val(payType)
  $("#payForm").submit();

Still blocked by the browser

2.3 After ajax, set an a tag, and then simulate a click

Example:

The page put an empty a

<%-- Custom Submit Link--%>
<a id="paymentLink" ="" target="_blank" style="display:none"></a>

Submit ajax post in js, get payment-related links, and simulate click events by assigning a link href attribute.

   //Order Confirmation
    $j("#createOrderButton").click(function(){
       var formData=getFormDataToSubmit();
      //sConfirm('Please complete the payment in the newly opened page', 'Please do not close this page until the payment is completed!')
      var data = loxia.syncXhrPost(_contextPath+"/transaction/create",formData);
      if(null!=data && true==data.result){
        var paymentFullRequestURL=data.paymentFullRequestURL;
 
        $j("#paymentLink").attr("href",paymentFullRequestURL);
        document.getElementById("paymentLink").click();//$j("#paymentLink").click();//This method does not work
      }
 });

The above code has been 2012年 tested on the left and right, and it is ok. If you use this trick this time, there is still a chance that it will be intercepted by the browser.

3. Reason

When it window.open is 用户触发事件或者加载时, it will not be intercepted; once the code is moved into ajax, it may be intercepted.

Open the form after Ajax, the browser will think it may be 广告弹窗the code of the class

4. Solutions

Found a solution on stackoverflow, see Bypass popup blocker on window.open when JQuery event.preventDefault() is set

4.1 Core idea

First open a window by the user's click, and then redirect the window

4.2 Process:

Before submitting ajax , define a window

Such as var windowObj = window.open();
Submit a ajax request, this request needs to be async:false
If ajax successful, then the windowObj new address will be appended, such as windowObj.location = paymentHref;
If it ajax fails or exception, then it needs to be windowObj closed, such as windowObj.close();

4.3 Sample code:

$('#createOrder').on('tap',function(){
    var windowObj = window.open(); //before submitting `ajax`, define a `window`
 
    $.ajax({
        type: 'POST',
        url: base + '/transaction/create',
        dataType: 'json',
 
        async:false, //Note that it is async:false
 
        success: function(result){
 
            var subOrdinate = result.returnObject.subOrdinate;
            var payType=$('input[name="paymentInfoSubForm.paymentType"]').val();
            var paymentHref=base+"/payment/goToPaymentDirect.htm?subOrdinate="+subOrdinate+"&payType="+payType;
            windowObj.location = paymentHref;
 
            //do something else
 
            //For example, a friendly prompt layer pops up
        },
 
        error: function(){
            //If the submission fails, or there is a problem with the verification, the open window needs to be closed here
             windowObj.close();
        }
 
    });
});