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

    }

})

  });

PHP

if($_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){&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; var id = $("#id").val();&nbsp; &nbsp; var userName = $("#userType").val();&nbsp; &nbsp; var userType = $("#userType").val();&nbsp; &nbsp; var action = 'update';&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; url:"/auth/action.php",&nbsp; &nbsp; &nbsp; &nbsp; method:"POST",&nbsp; &nbsp; &nbsp; &nbsp; data:{id:id, action:action,userName:userName,userType:userType},&nbsp; &nbsp; &nbsp; &nbsp; success:function(data)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Your response from update function....&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Now hide your modal if you see success response...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#editModal').modal('hide');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; });

Answer 2

我认为您可能正在寻找从模态弹出窗口中使用 ajax 发布表单数据，但您无法获得它。这是指导您并检查解决方案是否正确的代码&nbsp; &nbsp; $(document).on('click', '#update', function(){&nbsp; &nbsp; &nbsp; &nbsp; $('#editModal').modal('show');&nbsp; &nbsp; &nbsp; &nbsp; var id = $("#id").val();&nbsp; &nbsp; &nbsp; &nbsp; var userName = $("#userType").val();&nbsp; &nbsp; &nbsp; &nbsp; var userType = $("#userType").val();&nbsp; &nbsp; &nbsp; &nbsp; alert(userType);&nbsp; &nbsp; &nbsp; &nbsp; var action = 'edit';&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:"/auth/action.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method:"POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data:{id:id, action:action,userName:userName,userType:userType},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success:function(data)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#editModal').modal('hide');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#userName').val(userName);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#userType').val(userType);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#id').val(id);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; });<!-- Button trigger modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal">&nbsp; Launch demo modal</button>&nbsp;<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-dialog" role="document">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5 class="modal-title">Edit User</h5>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="close" data-dismiss="modal" aria-label="Close">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span aria-hidden="true">&times;</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form method="post" action="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="userName" class="col-form-label">Username:</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control border-danger" id="userName" readonly style="background-color: #2A3038">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="userType" class="col-form-label">User Type:</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select class="form-control border-success" id="userType">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="user">User</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="contributor">Contributor</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-footer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="hidden" id="id" name="id" value="1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="hidden" id="operation" name="operation">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" id="update" name="update" class="btn btn-success">Update</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>