Question

我是AJAX请求世界的新手。

我在使用API时遇到问题。我需要发出一个DELETE请求，其中包含一个令牌和一个id来删除数据库中的某些数据。它使用postman完美地工作，当我在不发送数据的情况下发出请求时，它可以在这里工作。但是当我尝试发送数据时，它会回复404错误。

我真的不明白发生了什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Admin</title>

    <link rel="stylesheet" href="./style.css">
</head>

<body class="invert">
    <nav class="nav">
        <a href="./index.html" class="title">John Doe</a>
    
        <ul>
            <li>
                <a href="./admin.html" class="active">all</a>
            </li>
    
            <li>
                <a href="./adminCreate.html">New</a>
            </li>
    
            <li>
                <a href="./logout.html">Logout</a>
            </li>
        </ul>
    </nav>

    <main class="dashboard page">
        <div class="container medium">
            <h2>Works</h2>

            <ul class="listItems" id="works">
                <!-- <li>
                        <p>[Titre]</p>
                                    
                        <div class="actions">
                            <a href="./adminEdit.html?[slug]" class="btn outline">Edit</a>
                            <p id="delete" data-id="[_id]" class="btn outline delete">Delete</p>
                        </div>
                </li> -->
            </ul>
        </div>
    </main>

    <script src="./vendors/jquery.js"></script>

    <script>
        // Astuce
        // Pour rediriger vers une autre page, utilisez la commande :
        // window.location.replace('./page.html')

        $(document).ready(function(e){
          
            $works = $('#works')

            $.ajax({
                    type:'GET',
                    url: 'https://wsc-api.herokuapp.com/works',
                    success: function(content){
                    data = content.content;
                        displayData(data);
                        console.log(data)
                }
            });

            function displayData(D){
                let result = D
                const html = result.map(P => {
                    return `
                        <li>
                            <p>${P.title}</p>
                                        
                            <div class="actions">
                                <a href="./adminEdit.html?${P.slug}" class="btn outline">Edit</a>
                                <p id="delete" data-id="${P._id}" class="btn outline delete">Delete</p>
                            </div>
                        </li>
                       `;
                }).join('');
                $works.html(html) ;
            };

            $('#works').on('click', '#delete', function(){
                let id = $(this).data('id')
                let token = sessionStorage.getItem('token');

                 let data = "";
                     data += encodeURIComponent("token")+"="+encodeURIComponent(token)+"&";
                     data += encodeURIComponent("id")+"="+encodeURIComponent(id);
                     console.log(data);

                $.ajax({
                    type:'DELETE',
                    url: 'https://wsc-api.herokuapp.com/works',
                    data: data,
                    ContentType: 'application/x-www-form-urlencoded',
                    success: function(content){
                        $(this).remove();
                        console.log(content)
                    }
                });
            });
        });
            

       



    </script>
</body>
</html>

如果有人对此代码以及我这样做的方式有任何建议，那就太棒了。

谢谢你。

Ajax DELETE请求

0 个答案: