javascript - 通过表单提交数据时页面不断刷新

Question

我在一个 Laravel 项目上工作，当用户点击表单上的提交按钮(具有隐藏的输入值)时，我将数据重定向到服务器端逻辑(使用 PHP 构建)，执行一些计算，然后重定向到前端(作为 AJAX 成功内部的响应)工作正常，接下来，我填充对表单的一些输入的响应，最后调用提交方法(通过 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);
        }
    }); 
  });

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

});