Question

我正在一个Laravel项目中，当用户点击表单上的Submit按钮（具有隐藏的输入值）时，我将数据重定向到服务器端逻辑（使用PHP构建），执行一些计算，然后重定向到可以正常工作的前端（作为AJAX成功内部的响应），接下来，我填充对表单某些输入的响应，最后（通过jquery）调用Submit方法。

当我在浏览器中打开“网络”选项卡时，我看到数据一直多次发布，但我希望只发布一次而不刷新。请协助？

表格

<form 
   id="eazzycheckout-payment-form"
   action="https://api-test.*************************" method="POST">
   <input type="hidden" name="custName" id="custName" value="{{ $first }} {{ $last }}">
   <input type="hidden" id="token" name="token" value="{{ $token}}">
   <input type="hidden" id="amount" name="amount" value="">
   <input type="hidden" id="orderReference" name="orderReference" value="">
   <input type="hidden" id="orderID" name="orderID" value="">
   <input type="hidden" id="merchantCode" name="merchantCode" value="6395866423">
   <input type="hidden" id="merchant" name="merchant" value="*************">
   <input type="hidden" id="outletCode" name="outletCode" value="0000000000">
   <input type="hidden" id="extraData" name="extraData" value="Travel_Purchase">
   <input type="hidden" id="popupLogo" name="popupLogo" value="https://********************svg">
   <input type="hidden" id="ez2_callbackurl" name="ez2_callbackurl" value=" https://digital****************">
   <input type="hidden" id="expiry" name="expiry" value="{{ $newDate}}">

  <div class="card">
    <img class="card-img-top payment" src="{{asset('assets/images-new/mastercard.svg')}}" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title payment">
          <!-- Button user is hitting-->
          <button type="submit" id="submit-cg" value="Checkout" style="cursor: pointer;" class="jenga"> Make Payment </button>
      </h5>
    </div>
  </div>
  <!-- End Hidden form-->
  </form>

AJAX代码可将数据提交到后端，获取响应并通过jquery提交表单

 var form = $('#eazzycheckout-payment-form');

  $( "form" ).submit(function(e) {
    //Prevent default submission
    e.preventDefault();

    var type = 'jengaapi';
    var quote = $('#quote').val();
    var phone = $('#phone').val();

    var type ={
      'type': type,
      'quote' : quote,
      'phone' : phone,
    };
    //console.log(type);

    //Amount
    var amount = $('#amount');
    var orderID = $('#orderID');
    var  orderRef = $('#orderReference');

    $.ajax({
        type: 'POST',
        url: 'jengaAPI',
        //post data to the backend
        data: JSON.stringify(type),
        contentType: 'application/json',
        dataType: "json",
        //get the response
        success: function(response){
            //Populate the fields in the form above dynamically
            amount.val(response.amount);
            orderID.val(response.payment_reference);
            orderRef.val(response.payment_reference);

            //Submit the form
            $('#eazzycheckout-payment-form').submit();


        },
        error: function(errMsg) {
             alert(errMsg);
        }
    }); 
  });

Answer 1

定义您的表单，如下所示：

<form method="GET" action="" onsubmit="return false;">

您的提交按钮包含onClick函数：

<button type="submit" onclick="submitForm();">Submit</button>

在submitForm()函数中，获取表单的数据，然后使用ajax将其直接发送到您的API：

url = $("form").serialize();
$(document).ready(function() {
  $.ajax({
    type: "GET",
    dataType: "json",
    url: 'https://api-test.yoursite.com/api?' + url,
    success: function(data) {
        //Data
    },
  });

});

通过表单提交数据时，Page保持引用功能

1 个答案: