成功单击状态按钮后重新加载div

Question

我的问题是当我点击有效/无效按钮时，它会连续加载3至4次。我希望它只加载一次而不加载整个页面。

我尝试同时加载demoajax div部分和加载索引页面都会产生相同的效果。

html代码

<form action="" method="post">
    <div id='demoajax'>

    </div>
</form>

php代码

 function showData($data,$con)
    {
        $sql = "select * from demo";
        $data = $con->query($sql);
        $str='';
        if($data->num_rows>0)
        {
            while( $row = $data->fetch_array(MYSQLI_ASSOC))
            {
                $str.="
                    <div class='container'>
                        <div class='row'>
                        "?>
                            <div class='col-md-1'>
                                <?php if ($row['status'] == '1')
                                {
                                ?>
                                <a href='#' ida='<?php echo $row['id'];?>' class='btn btn-success active' ></a>
                                <?php 
                                }
                                else if($row['status'] == '0')
                                {
                                ?>
                                <a href='#' idde='<?php echo $row['id'];?>' class='btn btn-danger deactive'  ></a>
                                <?php } ?>
                            </div>
                    </div>
                    </div>

                <?php
            }
        }
        else
        {
            $str .= "<p style='text-align:center;'>No Data Available</p>";
        }
        echo $str;   
    }

    if(isset($_REQUEST['status']))
    {   
        $status = $_REQUEST['status'];
        $id = $_REQUEST['id'];
        $sql = 'update demo set status='.$status.' where id='.$id.'';
        $result = mysqli_query($sql);
        if($result)
        {
            echo 'updated successfully';
        }
        else
        {
            echo 'failed to update';
        }
    }

jquery代码

$('body').delegate('.active','click',function(e){
    var IdStatus = 0;
    var id = $(this).attr('ida');
    $.ajax({
        url:"index.php",
        data:{
            status:IdStatus,
            id:id
        },
        dataType:'html',
        success:function(result)
        {
            $('#demoajax').load('index.php');
            //$('#demoajax').load('#demoajax');
            //$('demoajax').html(result);
        }
    });

});

$('body').delegate('.deactive','click',function(e){
    e.preventDefault();

    var IdStatus = 1;
    var id = $(this).attr('idde');
    $.ajax({
        url:"index.php",
        data:{
            status:IdStatus,
            id:id
        },
        dataType:'html',
        success:function(result)
        {
            $('#demoajax').load('index.php');
            //$('#demoajax').load('#demoajax');
            //$('demoajax').html(result);
        }
    });

});