簡體   English   中英

PHP + Ajax無需頁面刷新

[英]php + ajax without page refresh

我正在嘗試更新用戶表中的狀態-當用戶單擊按鈕時,我使用ajax將其發送到php頁面,但響應時頁面會重新加載,因為我使用的是`location.reload();。 有沒有一種方法可以使按鈕更改狀態而無需重新加載頁面?

按鈕:

<i data="<?php echo $row['id'];?>" class="status_checks btn <?php echo ($row['payment_status'])? 'btn-success' : 'btn-danger'?>"><?php echo ($row['payment_status'])? 'Paid' : 'Unpaid'?></i>   

PHP的更新數據庫

<?php 
extract($_POST);
$user_id=$db->real_escape_string($id);
$status=$db->real_escape_string($status);
$sql=$db->query("UPDATE users SET payment_status='$status' WHERE id='$id'");
echo $sql;

?>

最后,jQuery

<script type="text/javascript">
$(document).on('click','.status_checks',function(){
var status = ($(this).hasClass("btn-success")) ? 'Unpaid' : 'Paid';
var msg = (status=='Unpaid')? 'Unpaid' : 'Paid';
if(confirm("Are you sure to "+ msg)){
    var current_element = $(this);
    url = "update.php";
    $.ajax({
    type:"POST",
    url: url,
    data: {id:$(current_element).attr('data'),status:status},
    success: function(data)
        {   
            location.reload();
        }
    });
    }      
});
</script>

echo $sql; 將返回0或1

您可以更新按鈕的類而無需重新加載為

success: function(data)
        {   
           if(data == 1) // success
           {
             $('.status-checks').each(function(){
                if($(this).attr(data) == $(current_element).attr('data'))
                {
                   $(this).addClass('btn-success');
                   $(this).text('Paid');
                }
             })
           }else // failed
           {
             $('.status-checks').each(function(){
                if($(this).attr(data) == $(current_element).attr('data'))
                {
                   $(this).addClass('btn-danger');
                   $(this).text('Unpaid');
                }
             })
           }
        }
    });

您必須用if和else語句替換location.reload(),例如if(data)//按鈕值更改else //按鈕值不更改或其他語句

而已

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM