Страница сохраняет ссылки при отправке данных через форму - PullRequest
Новая
       41

Страница сохраняет ссылки при отправке данных через форму

0 голосов
/ 07 ноября 2018

Я работаю над проектом Laravel, в соответствии с которым, когда пользователь нажимает кнопку отправки на форме (которая имеет скрытые входные значения), я перенаправляю данные в серверную логику (сборка с PHP), выполняю некоторые вычисления и позже перенаправляю на интерфейс (как ответ внутри успеха AJAX), который работает нормально, затем я заполняю ответ на некоторые входные данные формы и, наконец, вызываю метод submit (через jquery).

Когда я открываю вкладку сети в браузере, я вижу, что данные продолжают публиковаться много раз, но я хочу, чтобы они публиковались только один раз без обновления. Пожалуйста, помогите?

Форма 

<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);
        }
    }); 
  });

1 Ответ

0 голосов
/ 07 ноября 2018

Определите вашу форму следующим образом: 

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

С вашей кнопкой отправки, содержащей функцию onClick: 

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

В функции submitForm() получите данные формы и отправьте их в свой API напрямую, используя ajax: 

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

});
...