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

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{
	text-decoration: none;
}
.btn-center
{
text-align: center;
}
.btn{
	background-color: blue;
	color: #fff;
	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

您正在使用 get 方法进行 ajax 调用， 您可以通过 url 传递参数或使用数据。 在数据中传递参数“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>

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 的尝试还不错，但我可以看到我在以下代码中更改了一些小东西：

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";
}