Отправить запрос REST и получить ответ без перезагрузки страницы

Question

Я хочу отобразить результат запроса на отдых без перезагрузки страницы.Я использую RAVE Вот пост URL https://ravesandboxapi.flutterwave.com/flwv3-pug/getpaidx/api/resolve_account

Вот JSON

{
    "recipientaccount": "0690000034",
    "destbankcode": "044",
    "PBFPubKey": "FLWPUBK-4e9d4e37974a61157ce8ca4f43c84936-X"
}

Вот ответ

{
    "status": "success",
    "message": "ACCOUNT RESOLVED",
    "data": {
        "data": {
            "responsecode": "00",
            "accountnumber": "0690000034",
            "accountname": "Ade Bond",
            "responsemessage": "Approved Or Completed Successfully",
            "phonenumber": null,
            "uniquereference": "FLWT00976651",
            "internalreference": null
        },
        "status": "success"
    }
}

Вот HTML-форма

<form action="#" method="POST">
    <input type="text" name="full_name">
    <input type="email" name="email">
    <input type="text" name="recipientaccount">
    <select name="bankcode">
        <option value="044">ACCESS BANK</option>
    </select>
    <!-- Display Account Name from the json response -->
    <input type="submit" name="submit">
</form>

Answer 1

Вы можете использовать jQuery Ajax.Это способ сделать HTTP-запрос асинхронно в фоновом режиме, поэтому он не требует обновления страницы.Синтаксис:

$("form").submit(function(e){
  e.preventDefault();
  let form = $(this).serialize();
  $.ajax({
    url: 'https://ravesandboxapi.flutterwave.com/flwv3-pug/getpaidx/api/resolve_account',
    method: 'POST',
    data: form,
    dataType: 'json',
    success: function(data){ 
      //success function
      //return data form server
      console.log(data)
    },
    error: function(data){ //error function
      console.log(data)
    }
  });

});

Ссылка:

http://api.jquery.com/jquery.ajax/