使用Jquery和AJAX加载外部iframe

时间:2018-12-06 10:06:56

标签: jquery iframe dynamic

我正在一个Laravel应用程序上工作,该应用程序具有一个带有隐藏输入字段的隐藏表单,借此,当用户单击表单上的按钮以启动付款后,我通过AJAX到达后端,获取一些数据并在响应上进行处理(在AJAX中),我使用Jquery填充表单上的输入字段。

问题是我想加载一个外部iframe(在表单的“操作”标签中有URL),必须在动态填充输入字段后加载该iframe。

我不确定如何使用AJAX加载外部iframe

〜请协助

表单上的隐藏输入

<form 
   id="eazzycheckout-payment-form"
   action="https://www.*************************" method="POST">

    <!-- Hidden Input fields-->
   <input type="hidden" id="amount" name="amount" value="">
   <input type="hidden" id="orderReference" name="orderReference" value="">
   <input type="hidden" id="orderID" name="orderID" value="">
   <!-- END-->

  <div class="card">
    <div class="card-body">
      <h5 class="card-title payment">
        <button type="submit" id="submit-cg" value="Checkout" style="cursor: pointer;" class="jenga"> Make Payment </button>
      </h5>
    </div>
  </div>
  </form>

jQuery和AJAX逻辑

 $("#eazzycheckout-payment-form").submit(function(e) {
    //Prevent submission
    e.preventDefault();

    //AJAX code to post data to Laravel backend
    $.ajax({
        type: 'POST',
        url: 'jengaAPI',
        data: JSON.stringify(type),
        contentType: 'application/json',
        dataType: "json",
        success: function(response){
            //console.log(response);

            //Populate the fields dynamically from the response
            $('#amount').val(response.amount);
            $('#orderID').val(response.payment_reference);
            $('#orderReference').val(response.payment_reference);

        },
        failure: function(errMsg) {
             alert('Errors');
        }
    });
  });

0 个答案:

没有答案