Javascript 如何在刷新（AJAX）页面上保持我的位置

我知道这只能通过AJAX实现，但我从未使用过AJAX。。。在我的网站上，你可以保留一张你从魔术游戏中得到的牌的列表，这是一张相当不错的列表。你必须按一个按钮来添加一张卡，每张卡都有这个按钮，当你添加它时，它会将卡添加到你的列表中，然后刷新并再次位于页面顶部。我怎样才能使它保持它的位置

在红色方框内，您可以按add或remove：

php（我将只显示2个函数，移除和添加卡片）

Set.php（添加和删除按钮）

if（登录检查（$mysqli）==true）{
$cardsHTML.='
Deze kaart heb ik。。。
|
';
}

您是否考虑过使用JS来实现这一点

注意：这需要JQuery插件，但是有很多CDN可以从中获得，google是最可靠的CDN之一

承蒙

---

也只是一张纸条。。。请停止使用非参数化查询。考虑使用MySql作为MySQL语法的一个步骤，这将为您提供一些面向对象编程的良好实践。 并按时间戳的升序获取数据。

---

显示该卡。它不会更改。

需要将游戏状态存储在某个位置。。。本地存储或服务器。如何。。。？我对此一无所知，这取决于职位是如何确定的。整个问题很模糊是的。。。我没有犯错误，我只是一个实习生，必须做这些小的修复，我应该把代码放在哪里，因为我真的不知道，我会冒险去猜测你在网站上运行Jquery，在这种情况下，将代码包装在页面上的标签中

//Add card to collection
function addCardToCollection($conn, $userID, $cardID){
//Checks if the cards is already added for this user
    $queryGetCard = 'SELECT user_id, card_id FROM collection WHERE user_id = '.$userID.' AND card_id = '.$cardID;
    $checkCollection = $conn->query($queryGetCard);
    if($checkCollection->fetch_assoc() > 0){return 'Deze kaart hebt u al.';}

//Adds card to the database
    $queryAddCard = 'INSERT INTO collection (user_id, card_id) VALUES ('.$userID.','.$cardID.')';
    if($conn->query($queryAddCard)){return 'Kaart toegevoegd.';}
    else{return 'Kaart niet toegevoegd.';}
}

//Remove card from collection
function removeCardFromCollection($conn, $userID, $cardID){
//Checks if the cards is in the collection
    $queryGetCard = 'SELECT user_id, card_id FROM collection WHERE user_id = '.$userID.' AND card_id = '.$cardID;
    $checkCollection = $conn->query($queryGetCard);
    if($checkCollection->fetch_assoc() == 0){return 'Deze kaart hebt u nog niet.';}

//Remove card from the database
    $queryAddCard = 'DELETE FROM collection WHERE user_id = '.$userID.' AND card_id = '.$cardID;
    if($conn->query($queryAddCard)){return 'Kaart verwijderd uit uw collectie.';}
    else{return 'Kaart niet verwijderd uit uw collectie.';}
}

if(login_check($mysqli) == true) {
    $cardsHTML.='<br><b>Deze kaart heb ik...
    <a href="' . $baseURL . 'set.php?id=' . $_GET['id'] . '&cardID=' . $value['id'] . '&collection=add">
        <div class="glyphicon glyphicon-ok green"></div>
    </a> |
    <a href="' . $baseURL . 'set.php?id=' . $_GET['id'] . '&cardID=' . $value['id'] . '&collection=remove">
        <div class="glyphicon glyphicon-remove red"></div>
    </a>
    </b>';
}

$(document).ready(function(){
    var storePosition = {     /// initializing the storeposition
        topCoordinate : null
    }


     storePosition.topCoordinate =  $(this).offset().top;   /// storing the position


    if(storePosition.topCoordinate !== 0){   // if we are at the top no point doing anything

     $("html, body").animate({"scrollTop":  storePosition.topCoordinate}, 500);


        }
});