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（）

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

1 个答案: