Sumbit form tanpa refresh page dengan javascripts

Helo kali ini saya akan share cara post form tanpa refresh page website dengan javascripts. Mungkin cara ini sudah banyak yang tahu tapi bagi yang baru belajar silakan simak artikel ini. Dalam sumbit form kita bisa lakukan tanpa javascripts cuma page akan di refresh dan memuat data ulang atau mendownload data-data ulang dari server sehingga membuat prosess menjadi lamat bahkan lama jika internet kalian lambat, tetapi kita bisa mengatasinya dengan mengunakan javascript berserta API json. tetapi disini kita hanya membahas sumbit nya saja. Sumbit dengan javasctipt ada dua cara. 

1. Bisa menggunakan form pembukan dan penutup seperti berikut:

<form id="formrvc">
    <div class="form-group">
        <label for="revenuecenter">Revenue Center Name</label>
        <input type="text" class="form-control norvc" placeholder="" name="revenuecenter">
    </div>
    <div class="form-group">
        <button class="btn btn-primary requestData">Request</button>
    </div>
</form>

Kemudian untuk javascript nya harus di tambahkan e.preventDefault() supaya form tidak refresh saat kita tekan sumbit.

$('#formrvc').on("click", ".requestData", function (e) {
   e.preventDefault();
   var Data = $(".norvc").val();
   alert("The following data would have been submitted to the server: \n\n" + Data);
 });

2. Tanpa mengunakan form seperti berikut ini:
   

<div class="form-group">
     <label for="revenuecenter">Revenue Center Name</label>
     <input type="text" class="form-control norvc" placeholder="" name="revenuecenter">
</div>
<div class="form-group">
     <button class="btn btn-primary requestData">Request</button>
</div>

Kemudian untuk javascriptnya agak berbeda sedikit kita tidak perlu mengunakan e.preventDefault() serta parsing formnya:

$('.requestData').on("click", function () {

    var Data = $(".norvc").val();
    alert("The following data would have been submitted to the server: \n\n" + Data);
 });

 

Dari kedua cara diatas hasilnya sama saja sekarang yang mana saja boleh digunakan saya bisanya menggunakan yang cara 2 tanpa form kemudia bisa pilih datanya mana saya yang diamabil untuk di prosess selanjutnya.