jquery、javascript、ajaxを使用してモーダル情報をapiに投稿する方法

Question

私はモーダルを持っています。例えば、モーダルはmodal.htmlにあります。私はjavascriptファイルmodal.jsにメソッドを書きました。私がモーダルでデータを提出しようとしているとき、それは正しく機能していません。コードは以下の通りです。私を助けてください。

/modal.html

<div class="col-md-12 text-right"> 
    <button type="button" data-toggle="modal" data-target="#myModal">Update User Information</button> 
    <div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Enter User Information</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="form-group"> 
        <input type="text" class="form-control" id="user_name" placeholder="User name"> 
       </div> 
       <div class="form-group"> 
        <input type="email" class="form-control" id="email_id" placeholder="Enter email"> 
       </div> 
       <div class="form-group"> 
        <input type="text" class="form-control" id="address" placeholder="Enter Address"> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="submit" class="btn btn-default" id="myFormSubmit">Submit</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 

/modal.js

$(function() { 
    $('#myFormSubmit').click(function() { 
     $.post("/api/adduserInfo/v1", 
      { 
       user_name : $("#user_name").val(), 
       email  : $("#email_id").val(), 
       address : $("#address").val() 
      }); 
    }); 
}); 

Answer 1

あなたは（あなたは、サーバー側でポストを経由してparametresを取得する必要があります）、このようなものを使用することができます。

     <!-- FORM --> 
        <form id="idform"> 
         <!-- FORM INPUTS --> 
         <input class="btn btn-large btn-primary" value="Submit" type="submit"> 
        </form> 


        <script> 
         // Variable to hold request 
         var request; 
         $("#idform").submit(function(event) { 

          // Prevent default posting of form - put here to work in case of errors 
          event.preventDefault(); 

          // Abort any pending request 
          if (request) { 
           request.abort(); 
          } 

          var $form = $(this); 

          // Let's select and cache all the fields 
          var $inputs = $form.find("input, select, button, textarea"); 

          // Serialize the data in the form 
          var serializedData = $form.serialize(); 

          $.ajax({ 
           url: '/api/adduserInfo/v1', 
           type: 'post', 
           data: serializedData, 
           beforeSend: function() { 
            $("#divtoaddresult").html("Processing, please wait..."); 
           }, 
           success: function (response) { 
            $("#divtoaddresult").html(response); 
           } 
          }); 
         }); 
        </script>