如何使用ajax和php在模式按钮中添加操作

如果按钮处于已单击的模式，如何执行操作？我将jQuery与Ajax和PHP结合使用

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

模态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>
                      <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">
                  <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>

编辑用户
&时代；
用户名：
用户类型：
使用者
贡献者
更新
接近

---

请求是为了编辑用户的信息，我遇到的问题是，modal中的submit按钮没有导致操作，我也在developer tools中的network选项卡中检查了它。

我想您可能正在使用ajax从modal弹出窗口发布表单数据，但您无法获得它

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

    $(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>

$（文档）。在（'单击'，'更新'，函数（）上）{
$（'editModal'）.modal（'show'）；
var id=$（“#id”）.val（）；
var userName=$（“#userType”）.val（）；
var userType=$（“#userType”）.val（）；
警报（用户类型）；
var action='edit'；
$.ajax({
url:“/auth/action.php”，
方法：“张贴”，
数据：{id:id，action:action，userName:userName，userType:userType}，
成功：功能（数据）
{
$（'#editModal'）.modal（'hide'）；
$（'#userName'）.val（userName）；
$（'#userType'）.val（userType）；
$（'#id'）.val（id）；
}
})
});
启动演示模式
编辑用户
&时代；
用户名：
用户类型：
使用者
贡献者
更新
接近

我认为您可能正在从模式弹出窗口中寻找使用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>

$（文档）。在（'单击'，'更新'，函数（）上）{
$（'editModal'）.modal（'show'）；
var id=$（“#id”）.val（）；
var userName=$（“#userType”）.val（）；
var userType=$（“#userType”）.val（）；
警报（用户类型）；
var action='edit'；
$.ajax({
url:“/auth/action.php”，
方法：“张贴”，
数据：{id:id，action:action，userName:userName，userType:userType}，
成功：功能（数据）
{
$（'#editModal'）.modal（'hide'）；
$（'#userName'）.val（userName）；
$（'#userType'）.val（userType）；
$（'#id'）.val（id）；
}
})
});
启动演示模式
编辑用户
&时代；
用户名：
用户类型：
使用者
贡献者
更新
接近

一旦您通过编辑将数据分配到模式中，下一步就是单击模式中的更新按钮，因此您需要另一个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');
        }
    })
  });

---

一旦您通过编辑将数据分配到模式中，下一步就是单击模式中的更新按钮，因此您需要另一个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');
        }
    })
  });

---

你能分享你的HTML代码吗？很可能你在DOM上有多个

#edit

，你没有只发布

操作

和

id

，所以其他的都是未定义的。也可能与您的ajax问题无关，但是，请检查绑定参数，它们不匹配。@lawrencerone检查编辑谢谢，这样您就有了一个显示所有用户的循环，并在每个链接上编辑您使用的用户

id=“edit”

？它不清楚你的模态是做什么，一旦它打开它要张贴到一个文件更新，而不是它应该得到，然后填写表格。。但是您的代码正在使用来自当前表单的输入，然后将它们放回表单中。此外，id、操作和更新不会在

$（“#更新”）之外发送。单击（）事件触发Ajax您可以共享您的HTML代码，最有可能的情况是，您在DOM上有多个

#edit

，而不是仅发布

操作和
id
的值，因此其他值将未定义。也可能与ajax问题无关，但请检查绑定参数，它们不匹配