Question

我试图通过为每条记录创建一个删除按钮来从数据表中删除记录。我的代码问题是，我第一次点击删除按钮时刷新页面并删除记录，第二次单击按钮Ajax激活两次并且我没有获得引导模式，可以＆＃39 ; t删除记录。任何建议如何修复Ajax两次启动。

的index.php

      <body>
          <div id="test1234">
            <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>fname</th>
                        <th>lname</th>
                        <th>email</th>
                        <th>username</th>
                        <th>Delete</th>
                    </tr>
                </thead>


                <tbody>
                <?php
                    // connect to mongodb
                    $m = new MongoClient();
                    $db = $m->local;
                    $collection = $db->user;

                    $results = $collection->find();

                    foreach($results as $res){
                        $fname = $res['fname'];
                        $lname = $res['lname'];
                        $email = $res['email'];
                        $username = $res['username'];

                ?>
                    <tr>
                        <td><?php echo $fname; ?></td>
                        <td><?php echo $lname; ?></td>
                        <td><?php echo $email; ?></td>
                        <td><?php echo $username; ?></td>
                        <td><a href="javascript:void(0)"  class="btn btn-theme btn-sm idname" data-toggle="modal" data-target="#md-normal" id=<?php echo $email ?> name="email" title="Delete"><i class="fa fa-trash-o"></i></a></td>
                    </tr>
                <?php
                    }
                ?>
                </tbody>
            </table>
            </div>
          </body>
        </html>

        <script>
          $(document).ready(function(){
            $('#example').DataTable();
            $(document).on('click','.idname', function(){
              var data = $(this).serialize(); 
              var aa = $(this).attr('id');
              alert('open modal: '+aa);
              $.ajax({
                type: 'POST',
                url: 'modal.php',
                async:false,
                data: ({name:aa}),
                cache: false,
                success: function(data){
                  $('#results').html(data);
                }
              })
              return false;
            });
          });
        </script>

        <div id="results"></div>

modal.php

        <?php
            $email = $_POST['name'];
        ?>



        <div id="myModal" class="modal fade" role="dialog">
          <div class="modal-dialog">


            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><?php echo $email; ?></h4>
              </div>
              <div class="modal-body">
                <p>Some text in the modal.</p>
              </div>
              <div class="modal-footer">
              <form action="deleteUser.php" id="formsubmit1" method="POST">
                <input type='hidden' id="email" name="email" value=<?php echo $email ?> >
                <input type="submit" id="submit" value="Submit" >
              </form>
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
              </div>
            </div>

          </div>
        </div>

        <script>
        $(document).ready(function() {
            $('#myModal').modal('show');
        });
        </script>

        <script>
          $(document).ready(function(){
            $('#formsubmit1').on('submit',function(){
                alert('opened');
              //e.preventDefault();
              var data = $(this).serialize();
              $.ajax({
                type: 'POST',
                url: 'deleteUser.php',
                data: data,
                cache: false,
                success: function(data){

                  $('#results3333').html(data);
                  //alert('res2');
                }
              })  
              return false;
            });

            $('#formsubmit1').on('submit', function(){
                //alert('close');
                $('#myModal').hide();
                $('.modal-backdrop').hide();
            });

             //refresh page 
            $('#formsubmit1').on('submit', function(){
                alert('refresh');
                //e.preventDefault();
              var data = $(this).serialize();
              $.ajax({
                type: 'POST',
                url: 'index.php',
                data: data,
                cache: false,
                success: function(data){

                  $('#test1234').html(data);

                  alert('ref2');
                }
              })  
              return false;
            });
          });
        </script>

userDelete.php

            <?php
                $email = $_POST['email'];
                $m = new MongoClient();
                $db = $m->local;
                $collection = $db->user;

                $results = $collection->remove(array('email' => $email));


            ?>

Answer 1

正如@Michelem所提到的那样，有多个函数作为提交处理程序附加到你的表单中，其中的form formubmit1在modal.php中。

$('#formsubmit1').on('submit',function(){
            alert('opened');
          //e.preventDefault();
          var data = $(this).serialize();
 //////////////////HERE////////////////////////
          $.ajax({
            type: 'POST',
            url: 'deleteUser.php',
            data: data,
            cache: false,
            success: function(data){

              $('#results3333').html(data);
              //alert('res2');
            }
          })  
          return false;
        });

        $('#formsubmit1').on('submit', function(){
            //alert('close');
            $('#myModal').hide();
            $('.modal-backdrop').hide();
        });

         //refresh page 
        $('#formsubmit1').on('submit', function(){
            alert('refresh');
            //e.preventDefault();
          var data = $(this).serialize();
   //////////////////HERE////////////////////////
          $.ajax({
            type: 'POST',
            url: 'index.php',
            data: data,
            cache: false,
            success: function(data){

              $('#test1234').html(data);

              alert('ref2');
            }
          })  
          return false;
        });

为什么我的Ajax会激活两次？

1 个答案: