html 用javascript点击删除按钮进行删除操作时如何得到restaurant_name?

gudnpqoy  于 2023-02-10  发布在  Java
关注(0)|答案(1)|浏览(137)

我试图执行一个删除操作,从用户的收藏夹中删除一个项目,但我很难弄清楚如何检索restaurant_name。
在POSTMAN中,我的删除操作URL是{{baseUrl}}/favorites/restaurant_name/user_name目前我可以从会话存储中检索登录用户的user_name
我尝试了许多方法来检索restaurant_name。我尝试的一种方法是将其存储在URL中,然后尝试从那里检索,但没有成功。我还尝试在单击按钮时将restuarant_name存储在会话存储中,但也没有成功。restaurant_name的值没有显示在session_storage中。

正如你可以看到的图片左手角,餐厅_名称可以在URL中检索。然而,当我尝试console.log(餐厅_名称)它说它的未定义的第一次,因为它还没有去的URL与餐厅名称尚未(例如localhost 3000/favorites.html?餐厅_名称=阿斯顿)。之后去的URL,它可以检索餐厅_名称从URL。
这是我的代码供参考。任何帮助将不胜感激:)
获取收藏夹

function getFavorites() {
    var response = "";
    var request = new XMLHttpRequest();
    user_name = sessionStorage.getItem('user_name');
    request.open("GET", "https://abakandkansdjk.execute-api.us-east-1.amazonaws.com/favorites/" + user_name, true);

    request.onload = function () {
        response = JSON.parse(request.responseText);
        console.log(response);

        var HTML = ""
        for (let i = 0; i < response.Count; i++) {
            console.log(response.Items[i].restaurant_name)


            HTML += '<div class="col-md-3 box " style="background-color: #debc99;">' +
                '<div class="card" style="margin:15px -5 20px -5; ">' +
                '<a class="card-block stretched-link" href="#"></a>' +
                '<img class="card-img-top" src="' + response.Items[i].image + '" style="margin-left: 1px;width: 220px; margin-top: -15px;"' +
                'alt="Card image cap">' +
                '<div class="card-body">' +
                '<h5 class="card-title"></h5>' +

                '<h4 style="margin-top: 0px; color:black">' + response.Items[i].restaurant_name + '</h4>' +
                '<span class="badge badge-secondary float-right"' +
                'style="background-color: #8d4843; margin-top: -5px;">Cuisine</span>' +
                '<a style="color: black; margin-top: -5px;" onclick="deleteFavorites(); sessionStorage.setItem("favRestaurant",' + response.Items[i].restaurant_name +');" href="favorites.html?restaurant_name=' + response.Items[i].restaurant_name + '"' + '><u>Delete</u></a>' +

                '</div>' +
                '</div>' +

                '</div>'



        }

        document.getElementById('favoritesList').innerHTML = HTML;
    };
    request.send();
}

删除收藏夹

function deleteFavorites() {
    var response = "";
    var user_name = sessionStorage.getItem("user_name")
    console.log(user_name)

    var alert1 = confirm("Are you sure you want to delete this item from your favourites? This is irreversible.");

    if (alert1 === true) {
        window.location.href="http://localhost:3000/favorites.html?restaurant_name=" + restaurant_name
        console.log(restaurant_name)
        var urlParams = new URLSearchParams(window.location.search);
        var restaurant_name = urlParams.get("restaurant_name");
        var request = new XMLHttpRequest();
        var url = "https://aba3bajndc.execute-api.us-east-1.amazonaws.com/favorites/" + restaurant_name + "/" + user_name
        console.log("restaurant_name")
        request.open("DELETE", url, true);
        request.onload = function () {
            if (response.message == "favorites deleted") {
                alert('This restaurant has been deleted from favorites!');

            }
            else if (response.message != "favorites deleted") {
                alert('Unable to add to favorites, try again!');

            }
        }
        request.send();
    }
  
}
x7rlezfr

x7rlezfr1#

我会将onclick="deleteFavorites();更改为:

onclick="deleteFavorites(response.Items[i].restaurant_name);

并将deleteFavorites函数签名更改为:

function deleteFavorites(restaurant_name) {

相关问题