Получение результатов php после вызова AJAX без перезагрузки страницы

Question

У меня есть три раздела на странице. Ожидающие, принятые и запрещенные пользователи. Я выводю все эти данные через цикл php while. Рядом с разделом «Ожидающие пользователи» для каждого пользователя в этом разделе у меня есть две кнопки («Принять и запретить»). Когда одна из этих кнопок нажата, я запускаю вызов Ajax в мой php-файл, который обновляет статус пользователя до Accept или Denied (в зависимости от того, что было нажато).

Проблема, с которой я столкнулась, не позволяет обновить страницу, данные пользователя не будут перемещены в обновленный раздел состояния (все правильно обновляется на стороне db). Однако, если я выхожу из кода return false;, страница обновляется, но мой $('#success').html('User Status Changed!'); $('#success').delay(5000).fadeOut(400); уходит прямо, когда страница освежает, так почти мгновенно.

Мне нужен способ, чтобы страница не обновлялась, но данные моего пользователя перемещаются в соответствующий раздел, поэтому сообщение об успешном завершении все еще появляется.

$(document).ready(function() { 

$('.approve').click(function() { 
    $.ajax({ 
     url: 'userRequest_approve.php', 
     type: 'POST', 
     data: { 
      id: $(this).val(), //id 
      status: 'Approved' //status 
     }, 
     success: function (data) { 
      //do something with the data that got returned 
      $("#success").fadeIn(); 
      $("#success").show(); 
      $('#success').html('User Status Changed!'); 
      $('#success').delay(5000).fadeOut(400); 
     }, 
     //type: 'POST' 
    }); 
    return false; 
}); 
}); 

Форма

<form action="" method="POST" id="status"> 


    <input type='hidden' name='id' value='<?php echo $pending_id; ?>' id='pending_id' /> 
    <?php if ($pending_firstname==t rue) { echo "Name - ". $pending_firstname . " " . $pending_lastname . "</br>" . "Username - ". $pending_username . "</br></br>" //echo print_r($_POST); ?> 
</form> 
<button class="approve" type="submit" form="status" name="approve" value="<?=$pending_id;?>">Approve</button> 
<button id="deny" type="submit" form="status" name="deny" value="Denied">Deny</button> 
<br> 
<br> 
<br> 
<?php ;} else { echo "There are no Pending Requests at this time."; } 

Код для HTML части:

<?php 
$con = mysqli_connect("localhost", "root", "", "db"); 
$run = mysqli_query($con,"SELECT * FROM user_requests ORDER BY id DESC"); 
$numrows = mysqli_num_rows($run); 

    if($numrows) { 
     while($row = mysqli_fetch_assoc($run)){ 
      if($row['status'] == "Pending"){ 

       $pending_id  = $row['id']; 
       $pending_user_id = $row['user_id']; 
       $pending_firstname = $row['firstname']; 
       $pending_lastname = $row['lastname']; 
       $pending_username = $row['username']; 
?> 
     <form action="" method="POST" id="status"> 
      <input type='hidden' name='id' value='<?php echo $pending_id; ?>' id='pending_id'/> 
<?php 
     if ($pending_firstname == true) { 
      echo "Name - ". $pending_firstname . " " . $pending_lastname . "</br>" . 
       "Username - ". $pending_username . "</br></br>" 
       //echo print_r($_POST); 
?> 


         <button class="approve" type="submit" form="status" name="approve" value="<?=$pending_id;?>">Approve</button> 
         <button id="deny" type="submit" form="status" name="deny" value="Denied">Deny</button> 
         </form><br><br><br> 
<?php 
        ;} else { 
         echo "There are no Pending Requests at this time."; 
        } 
       } 
      } 
     } 
?> 
<hr><br> 

     <h2>Approved User Requests</h2><br> 
     <div id="success" style="color: red;"></div><br> 
    <?php 
     $con2 = mysqli_connect("localhost", "root", "", "db"); 
     $run2 = mysqli_query($con2,"SELECT * FROM user_requests ORDER BY id DESC"); 
     $numrows2 = mysqli_num_rows($run2); 

      if($numrows2) { 
       while($row2 = mysqli_fetch_assoc($run2)){ 
        if($row2['status'] == "Approved"){ 

         $approved_id  = $row2['user_id']; 
         $approved_firstname = $row2['firstname']; 
         $approved_lastname = $row2['lastname']; 
         $approved_username = $row2['username']; 

     if ($approved_firstname == true) { 
      echo "Name - ". $approved_firstname . " " . $approved_lastname . "</br>" . 
       "Username - ". $approved_username . "</br></br>" 
?> 

Answer 1

Попробуйте это. Вы захватываете событие click, которое не останавливает отправку формы. Если вы измените свой обработчик на отправку и предотвратите действие по умолчанию, это должно сработать.

$(document).ready(function() { 

$('#status').on('submit', function (event) { 
event.preventDefault(); 

    $.ajax({ 
     url: 'userRequest_approve.php', 
     type: 'POST', 
     data: { 
      id: $(this).val(), //id 
      status: 'Approved' //status 
     }, 
     success: function (data) { 
      //do something with the data that got returned 
      $("#success").fadeIn(); 
      $("#success").show(); 
      $('#success').html('User Status Changed!'); 
      $('#success').delay(5000).fadeOut(400); 
     } 
     //type: 'POST' 
    }); 

}); 
}); 

Форма

<form action="" method="POST" id="status"> 


    <input type='hidden' name='id' value='<?php echo $pending_id; ?>' id='pending_id' /> 
    <?php if ($pending_firstname == true) { echo "Name - ". $pending_firstname . " " . $pending_lastname . "</br>" . "Username - ". $pending_username . "</br></br>" //echo print_r($_POST); ?> 

<button class="approve" type="submit" form="status" name="approve" value="<?=$pending_id;?>">Approve</button> 
<button id="deny" type="submit" form="status" name="deny" value="Denied">Deny</button> 


</form> 
<br> 
<br> 
<br> 
<?php ;} else { echo "There are no Pending Requests at this time."; } 

правка Раздел TRY ЭТО

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 

<?php 
    $con = mysqli_connect("localhost", "root", "", "db"); 
    $run = mysqli_query($con,"SELECT * FROM user_requests WHERE status='Pending' ORDER BY id DESC"); 
    $numrows = mysqli_num_rows($run); 

    if($numrows) { 
     while($row = mysqli_fetch_assoc($run)){ 
      if($row['status'] == "Pending"){ 

       $pending_id  = $row['id']; 
       $pending_user_id = $row['user_id']; 
       $pending_firstname = $row['firstname']; 
       $pending_lastname = $row['lastname']; 
       $pending_username = $row['username']; 

       if ($pending_firstname == true) { 

        // note removed ID 
        echo '<form action="" method="POST">'; 
        echo "Name - " . $pending_firstname . " " . $pending_lastname . "</br>" . "Username - " . $pending_username . "</br></br>"; 
        echo '<button class="approve" type="submit" name="approve" action="Approved" value="', $pending_id ,'">Approve</button>'; 
        echo '<button class="deny" type="submit" name="deny" action="Denied" value="', $pending_id ,'" >Deny</button>'; 
        echo '</form><br><br><br>'; 

       } 
      } 
     } 
    } 
    else { 
     echo "There are no Pending Requests at this time."; 
    } 
?> 
<hr><br> 

<h2>Approved User Requests</h2><br> 
<div id="success" style="color: red;"></div><br> 
<?php 
    $con2 = mysqli_connect("localhost", "root", "", "db"); 
    $run2 = mysqli_query($con2,"SELECT * FROM user_requests WHERE status='Approved' ORDER BY id DESC"); 
    $numrows2 = mysqli_num_rows($run2); 

    if($numrows2) { 

     while($row2 = mysqli_fetch_assoc($run2)) 
     { 
      $approved_id  = $row2['user_id']; 
      $approved_firstname = $row2['firstname']; 
      $approved_lastname = $row2['lastname']; 
      $approved_username = $row2['username']; 

      if ($approved_firstname == true) 
      { 
       echo "Name - ". $approved_firstname . " " . $approved_lastname . "</br>" . 
        "Username - ". $approved_username . "</br></br>"; 
      } 
     } 
    } 
    else 
    { 
     // none already in approved status 

    } 
?> 

<script type="text/javascript"> 

    $(document).ready(function(){ 

     // button handler 
     $('button').on('click', function (event) { 
      event.preventDefault(); 

      // get the button that was pressed 
      var _button = $(this); 
      // get the value of this button 
      var _val = _button.val(); 

      // get the action for the button (Either Approved or Denied) 
      var _action = _button.attr('action'); 

      // get the form the button is in 
      var _form = _button.closest('form'); 

      var _dataPassed = {status:_action,id:_val}; 

      // log the data I'm seding (for debug) 
      console.log(_dataPassed); 

      // Trigger a submit event and pass the submit handler the value of the button pressed.  
      _form.triggerHandler('submit', _dataPassed); 

     }); 


     $('form').submit(function (event, Passeddata) { 
      // prevent the submit event so the page doesn't refresh. 
      event.preventDefault(); 

      // make a ajax request with the value of the button that was pressed. 
      $.ajax({ 
       url: 'userRequest_approve.php', 
       type: 'POST', 
       data: Passeddata, 
       success: function (data) { 
        //do something with the data that got returned 
        $("#success").fadeIn(); 
        $("#success").show(); 
        $('#success').html('User Status Changed!'); 
        $('#success').delay(5000).fadeOut(400); 
       }, 
       error: function (jqXHR, textStatus, errorThrown) { 
        // alert on an http error 
        alert(textStatus + errorThrown); 
       } 
      }); 

     }); 

    }); 
</script> 

</body> 
</html>