如何使用jquery和PHP更改div內容

Question

所以我有一些代碼，允許用戶單擊圖標以將該項目保存到他們的收藏夾或從收藏夾中刪除。 我想使用jquery / AJAX更改圖標。 我想知道如何從PHP文件返回代碼以更新頁面而無需重新加載。 本質上，我想更新心臟圖標的顏色，並添加或刪除“保存”一詞。

這是我用於顯示div的AJAX代碼：

function deleteLink( deleteID ){

var deletedID = deleteID;

$.ajax({
    method: "POST",
    url: "deleteLink.php",
    dataType: "json",
    data:  { 'deletedID' : deletedID },

    success: function(deleteIDFunc){
        var deleteIDFunc = $.trim(deleteIDFunc);
        if(deleteIDFunc){               
            $('#removeSaved').html(deleteIDFunc); //<-how can I change the div so that it will display the other icon
        }
        else {
            alert('Your saved post was not removed. Please try again');
        }
    }
});
}

這是我用於刪除和更新數據庫的數據庫代碼：該更新可以正常工作。

function check_input($dirtData) {
  $dirtData = trim($dirtData);
  $dirtData = strip_tags($dirtData);
  $dirtData = stripslashes($dirtData);
  $dirtData = htmlspecialchars($dirtData);
  $dirtData = filter_var($dirtData, FILTER_SANITIZE_STRING);
  return $dirtData;
}

if(isset($_POST['id'])){

$ID = check_input($_SESSION['user_session']);
$link_id = check_input($_POST['id']);

$query = "INSERT INTO savelink (saveUser_id, link_id) VALUES ($ID, $link_id)";
$stmt = $conn->prepare($query);
$stmt->execute();

$returnID = "ok";
echo $returnID;
}else{
    return false;
}

if(isset($_POST['deletedID'])){

$id = check_input($_POST['deletedID']);

$query = "DELETE FROM savelink WHERE saveLink_id = :id";
$stmt = $conn->prepare($query);
$stmt->bindParam(':id', $id);
$stmt->execute();

$deleteIDFunc = '';  //<-do I need to put some html code here and then return json for changing the div
echo json_encode($deleteIDFunc);
}else{
    return false;
}

最后，這是顯示項目的代碼：

if(isset($_SESSION['user_session']) && $row['saveUser_id'] == $_SESSION['user_session']){
    $returnNew .= '<span id="removeSaved"><a href="javascript:void();" class="pull-right" onclick="deleteLink('.$row['saveLink_id'].');"><i class="fa fa-heart" style="color:#d52917;"></i></a></span>';
}
else if(isset($_SESSION['user_session'])){
    $returnNew .= '<span id="showSaved"><a href="javascript:void();" class="pull-right" onclick="saveLink('.$row['topic_id'].');">Save <i class="fa fa-heart"></i></a></span>';
}

Answer 1

這很簡單，

您可以將“ showSaved”中的以下內容添加到“ removeSaved” div中，並隱藏“ removeSaved” div。

例如如下：

$.ajax({
    method: "POST",
    url: "deleteLink.php",
    dataType: "json",
    data:  { 'deletedID' : deletedID },

    success: function(deleteIDFunc){
        var deleteIDFunc = $.trim(deleteIDFunc);
        if(deleteIDFunc){               
            $('#removeSaved').html(deleteIDFunc); //<-how can I change the div so that it will display the other icon
            $('#removeSaved').hide();
            $("#removeSaved").after('<span id="showSaved"><a href="javascript:void();" class="pull-right" onclick="saveLink('+deletedID +');">Save <i class="fa fa-heart"></i></a></span>');

        }
        else {
            alert('Your saved post was not removed. Please try again');
        }
    }
});

請注意要傳遞的ID，如果要將ID傳遞給Ajax函數deleteLink（）