如何使用ajax和php在模态按钮中添加动作

Question

如果按钮处于已单击的模式中，如何执行操作？我在 Ajax 和 PHP 中使用 jQuery。Javascript$(document).on('click', '#edit', function(){var id = $(this).attr("data-id");var userName = $(this).attr("data-username");var userType = $(this).attr("data-user_type");var action = 'edit';$.ajax({    url:"/auth/action",    method:"POST",    data:{id:id, action:action},    success:function(data)    {        $('#editModal').modal('show');        $('#userName').val(userName);        $('#userType').val(userType);        $('#id').val(id);    }})  });PHPif($_POST["action"] == 'edit'){    $statement = $connect->prepare(        "UPDATE users SET username = :username, user_type = :user_type WHERE id = :id"    );    $result = $statement->execute(        array(            ':userName' =>  $_POST["username"],            ':userType' =>  $_POST["user_type"],            ':id'           =>  $_POST["id"]        )    );    if(!empty($result))    {        echo 'Data Updated';    }}模态 HTML            <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">              <div class="modal-dialog" role="document">                <div class="modal-content">                  <div class="modal-header">                    <h5 class="modal-title">Edit User</h5>                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">                      <span aria-hidden="true">&times;</span>                    </button>                  </div>                  <div class="modal-body">                    <form method="post" action="">                      <div class="form-group">                        <label for="userName" class="col-form-label">Username:</label>                        <input type="text" class="form-control border-danger" id="userName" readonly style="background-color: #2A3038">                      </div>请求是编辑用户的信息，我遇到的问题是模式中的提交按钮没有引起操作，我还在开发人员工具的网络选项卡中检查了它。

Answer 1

一旦您通过编辑将数据分配到模态中，接下来就是单击模态内的更新按钮，因此您需要另一个 jquery 代码.... 为您的更新按钮提供一个类或 id 并这样做...

$(document).on('click', '.update', function(e){

    e.preventDefault();

    var id = $("#id").val();

    var userName = $("#userType").val();

    var userType = $("#userType").val();

    var action = 'update';

    $.ajax({

        url:"/auth/action.php",

        method:"POST",

        data:{id:id, action:action,userName:userName,userType:userType},

        success:function(data)

        {

            // Your response from update function....

            // Now hide your modal if you see success response...

            $('#editModal').modal('hide');

        }

    })

  });

Answer 2

我认为您可能正在寻找从模态弹出窗口中使用 ajax 发布表单数据，但您无法获得它。

这是指导您并检查解决方案是否正确的代码

    $(document).on('click', '#update', function(){

        $('#editModal').modal('show');

        var id = $("#id").val();

        var userName = $("#userType").val();

        var userType = $("#userType").val();

        alert(userType);

        var action = 'edit';

        $.ajax({

            url:"/auth/action.php",

            method:"POST",

            data:{id:id, action:action,userName:userName,userType:userType},

            success:function(data)

            {

                $('#editModal').modal('hide');

                $('#userName').val(userName);

                $('#userType').val(userType);

                $('#id').val(id);

            }

        })

  });

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">

  Launch demo modal

</button>

 <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

              <div class="modal-dialog" role="document">

                <div class="modal-content">

                  <div class="modal-header">

                    <h5 class="modal-title">Edit User</h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                      <span aria-hidden="true">&times;</span>

                    </button>

                  </div>

                  <div class="modal-body">

                    <form method="post" action="">

                      <div class="form-group">

                        <label for="userName" class="col-form-label">Username:</label>

                        <input type="text" class="form-control border-danger" id="userName" readonly style="background-color: #2A3038">

                      </div>

                      <div class="form-group">

                        <label for="userType" class="col-form-label">User Type:</label>

                        <select class="form-control border-success" id="userType">

                        <option value="user">User</option>

                        <option value="contributor">Contributor</option>

                        </select>

                      </div>

                    </form>

                  </div>

                  <div class="modal-footer">

                  <input type="hidden" id="id" name="id" value="1">

                  <input type="hidden" id="operation" name="operation">

                    <button type="button" id="update" name="update" class="btn btn-success">Update</button>

                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>

                  </div>

                </div>

              </div>

            </div>