AJAX別のフォームデータを外部APIに提出する方法

Question

複数のフォームデータを外部APIに提出するにはどうすればいいですか？私は異なるデータフィールドを持つ複数の異なるフォームを持っています。

しかし、ここで2つのフォームコードを挿入します。

私は以下のように最初の形式があります。

<!-- Customer details form start here --> 
 
          <form id="maklumat_form" method="post"> 
 
          <font color="#e4aa45">Maklumat Anda</font> 
 
           <div class="row"> 
 
            <div class="small-12 medium-8 columns"> 
 
             <input type="text" name="name" placeholder="Nama"> 
 
            </div> 
 
            <div class="small-12 medium-4 columns"> 
 
             <input type="text" name="phone" placeholder="No. Telefon"> 
 
            </div> 
 
            <div class="small-12 medium-6 columns"> 
 
             <select name="negeri" id="negeri"> 
 
             <option disabled selected>Negeri</option> 
 
             <option></option> 
 
             </select> 
 
             <select name="bandar" id="bandar"> 
 
             <option disabled selected>Bandar</option> 
 
             <option></option> 
 
             </select> 
 
             <input type="text" name="poskod" placeholder="Poskod"> 
 
            </div> 
 
            
 
            <div class="small-12 medium-6 columns"> 
 
             <textarea name="address" placeholder="Alamat" rows="5"></textarea> 
 
            </div> 
 
            
 
            <div class="small-12 medium-12 columns"> 
 
             <input type="text" name="email" placeholder="Emel"> 
 
            </div>  
 
          </div> 
 

 
          <div class="row">   
 
            <div class="small-12 medium-5 columns"> 
 
             <button type="submit" class="submit">TEMPAH SEKARANG</button> 
 
            </div>    
 
          </div> 
 

 
          </div> 
 
          <!-- end of order form --> 
 
        </form>

と第二の形式以下のように：sまで私が欲しい

<form id="sidebar_tempah_button"> 
 
          <div class="row"> 
 
          <div class="big-12 medium-12 columns"> 
 
           <font color="#e4aa45">Pengangkutan</font> 
 
           <input style="width:50%;color:#e4aa45;" type="text" name="pengangkutan" class="span2" id="pengangkutan" disabled="disabled" value=""> 
 
           </div> 
 
          </div> 
 

 
          <div class="row"> 
 
          <div class="big-12 medium-12 columns"> 
 
          <div class="hidden2" id="tarikh_slot"> 
 
           Tarikh & Slot 
 
           <input style="width:50%;" type="text" name="hari" class="submit" id="hari" readonly="true" value="KHAMIS"> 
 
           <input style="width:50%;background-color:#2ecc71;color:white;" type="text" name="tarikh" class="bayar" id="tarikh" readonly="true" value="1-1-2017"> 
 
           <input style="width:50%;background-color:#2ecc71;color:white;" type="text" name="slot" class="span2" id="slot" readonly="true" value=""> 
 
          </div> 
 
          </div> 
 
          </div> 
 

 
          <div class="row"> 
 
          <div class="big-12 medium-12 columns"> 
 
           Jumlah Semua 
 
           <input style="width:50%;background-color:#e4aa45;color:black;" type="text" name="jumlah_semua" class="span2" id="jumlah_semua" disabled="disabled" value=""> 
 
          </div> 
 
          </div> 
 

 
          <div class="row"> 
 
          <div class="big-12 medium-6 columns">       
 
          <button id="sidebar_tempah" type="submit" class="submit">TEMPAH SEKARANG</button> 
 
          </div> 
 
          </div> 
 
          </div> 
 
          </form>

をこのフォームデータを外部API（BillPlz API）に終了します。どうやってやるの ？あるフォーム提出のチュートリアルはありますが、複数のフォーム提出のためのチュートリアルはありません。

APIドキュメントの状態この：

「シェルで、あなただけの要求ごとに正しいHTTP基本認証の資格情報を渡すことができ https://www.billplz.com/api/v2/billsカール \ -u 73eb57f0-7d4e-42b9-A544-aeac6e4b0f81：。\ -d collection_id = inbmmepb \ "

私はこの種のデータをajaxを使って送る方法を本当に理解していません。すみません。

Answer 1

フォームの数に関係なく、Ajaxを使用して任意のデータを送信できます。 Ajaxの下にあなたは関係なく、フォームの数のAPIに送信するどんなデータとラインvar formData = {name:"ravi",age:"31"}; //Array上で編集することができ、同じ

var formData = "name=ravi&age=31"; //Name value Pair 
or 
var formData = {name:"ravi",age:"31"}; //Array 

$.ajax({ 
url : "AJAX_POST_URL", 
type: "POST", 
data : formData, 
success: function(data, textStatus, jqXHR) 
{ 
    //data - response from server 
}, 
error: function (jqXHR, textStatus, errorThrown) 
{ 

} 
}); 

を行います。 あなたがメモを払う必要があるのは、あなたがAPIを呼び出す必要があるフォームの提出時だけです。

アップデート：

var formData = {name:"ravi",age:"31"}; //ArrayはあなたのAPIのURLであるAPI

url : "AJAX_POST_URL"に送信するデータです。

data : formData,フォームデータをAPIに送信します。

あなたは、リンクに `document.getElementsByTagName（「フォーム」）のようにページ内のすべてのフォームをLink