單擊更改按鈕並在數據庫中記錄更新，反之亦然

Question

我有一個按鈕稱爲刪除。如果任何用戶點擊刪除，則刪除文本將被恢復所替代，刪除操作將在數據庫中執行。 同樣認爲我必須設置恢復按鈕。如果點擊恢復，然後通過刪除替換文本和恢復操作將執行，但我只需要一個按鈕。 請檢查我的下面的代碼。有刪除按鈕，當我點擊刪除按鈕時，它顯示恢復按鈕並重定向執行刪除事件。

我知道如何刪除和恢復在PHP中的記錄。我需要腳本來執行。 更改按鈕我在Jquery的幫助下完成了。不刷新，我必須顯示恢復按鈕。

$(document).ready(function() { 
 
    $("a.btn").click(function() { 
 
     if ($(this).hasClass('btn')) { 
 
      $(this).html('Restore').toggleClass('btn'); 
 
     } else { 
 
      $(this).html('Delete').toggleClass('btn'); 
 
     } 
 
    }); 
 
}); 
 

 

 
function b_delete(id){ 
 
    $.ajax({ 
 
     type: "get", 
 
     url: "process.php?function=b_delete&record_id=id", 
 
     data: { 
 
      record_id:record_id 
 
     }, 
 
     success: function (data){ 
 
      alert(data); 
 
     }, 
 
     error: function (xhr, ajaxOptions, thrownError){ 
 
     } 
 
    }); 
 
    
 
    return false; 
 
}

a{ 
 
\t text-decoration: none; 
 
} 
 
.btn-center 
 
{ 
 
text-align: center; 
 
} 
 
.btn{ 
 
\t background-color: blue; 
 
\t color: #fff; 
 
\t padding: 10px 15px; 
 

 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 

 
<div class="btn-center"> 
 
<a href="javascript:void(0);" onclick="return b_delete('<?php echo $user_Id;?>')" class="btn">Delete</a> 
 
</div>

Process.php

switch($_GET['function']) { 
case 'b_delete':b_delete($conn);break; 
default : redirect('index.php'); 
} 

function b_delete($conn) 
{ 
$record_id=$_GET['record_id']; 
echo "testing"; 
} 

Answer 1

你在阿賈克斯的嘗試並沒有那麼糟糕，但我看得出來，我在下面的代碼改變了一些小事：

Html

<div class="btn-center"> 
    <button id="delete_restore" onclick="b_delete(this, '<?php echo $user_Id;?>')" class="btn">Delete</a> 
</div> 

的Javascript

function b_delete(element, user_id){ 

    // change text of button 
    if (element.hasClass('btn')) { 
     element.html('Restore').toggleClass('btn'); 
    } else { 
     element.html('Delete').toggleClass('btn'); 
    } 


    /* where is this coming from? */ 
    var record_id = 9999; 


    var mode = 'b_delete'; 
    if(!element.hasClass('btn')){ 
     mode = 'b_restore'; 
    } 

    $.ajax({ 
     type: "post", 
     url: "process.php", 
     data: { 
      user_id: user_id, 
      mode: mode, 
      record_id: record_id 
     }, 
     success: function (data){ 
      console.log(data); 
     }, 
     error: function (xhr, ajaxOptions, thrownError){ 
      console.log("ajax request failed", xhr, ajaxOptions, thrownError); 
     } 
    }); 
} 

process.php

if(isset($_POST['mode'])){ 
    switch($_POST['mode']) { 
     case 'b_delete': b_delete($conn);break; 
     case 'b_restore': b_restore($conn);break; 
     default : header('Location: index.php'); //maybe use full url, i dont know for sure 
    } 
} 

function b_delete($conn) 
{ 
    $record_id=$_POST['record_id']; 
    echo "testing delete"; 
} 
function b_restore($conn) 
{ 
    $record_id=$_POST['record_id']; 
    echo "testing restore"; 
} 

Answer 2

你可以嘗試a分配數據屬性。

<a data-action="delete">Delete</a> 

然後在你的腳本：

$('a').on('click', function(){ 
    if ($(this).data('action') == 'delete') 
    { 
    //Do your ajax for delete 
    $.ajax({ 
     type: "get", 
     url: "process.php?function=b_delete", 
     data: { 
      'record_id':record_id 
     }, 
     success: function (data){ 
      alert(data); 
     }, 
     error: function (xhr, ajaxOptions, thrownError){ 
     } 
    }); 

    $(this).text('Restore'); 
    $(this).data('action', 'restore'); 
    } else { 
    //Do your ajax for restore 
    $(this).text('Delete'); 
    $(this).data('action', 'delete'); 
    } 
}); 

Answer 3

您正在使用AJAX調用get方法， 您可以通過網址或使用的數據參數。 將參數「record_id」的值傳遞給數據時有一個小錯誤。 它必須是數據：{RECORD_ID：ID}

<!-- language: lang-css --> 
<style> 
a { 
    text-decoration: none; 
} 

.btn-center { 
    text-align: center; 
} 

.btn { 
    background-color: blue; 
    color: #fff; 
    padding: 10px 15px; 
} 
</style> 
<!-- language: lang-html --> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<div class="btn-center"> 
    <a href="javascript:void(0);" 
     onclick="return b_delete('<?php echo $user_id;?>')" class="btn">Delete</a> 
</div> 

<!-- end snippet --> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("a.btn").click(function() { 
      if ($(this).hasClass('btn')) { 
       $(this).html('Restore').toggleClass('btn'); 
      } else { 
       $(this).html('Delete').toggleClass('btn'); 
      } 
     }); 
    }); 


    function b_delete(id){ 
     $.ajax({ 
      type: "get", 
      url: "process.php?function=b_delete&record_id=id", 
      data: { 
       record_id:id 
      }, 
      success: function (data){ 
       alert(data); 
      }, 
      error: function (xhr, ajaxOptions, thrownError){ 
      } 
     }); 

     return false; 
    } 
</script>