如何使用jquery，JavaScript，ajax将模态信息发布到API

Question

我有一个模态，例如模态在模态中.html，这是我在javascript文件中编写的方法模态.js。 当我尝试通过模态提交数据时，它无法正常工作。 代码如下。 请帮帮我一个人。

/模态.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>

/模态.js

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

Answer 1

您可以使用这样的东西(您必须通过服务器端的帖子获取参数(：

                        <!-- 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>