单击更改按钮并在数据库中记录更新，反之亦然

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>