如何使用 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

你可以使用这样的东西（你必须通过服务器端的 post 获取参数）：

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