如何使用AJAX删除项目

FIDDLE

我正在使用学习AJAX

LearnCode.academy 的RESTful API

我可以使用他们提供的API轻松添加新条目。我想现在删除条目。然而，每当我输入他们给我的地址时，我都会出错。

这是我正在使用的数据集

http://rest.learncode.academy/api/johnbob/friends

每当我发到这里，我都能看到一切都很好。此功能可添加新记录。

    $('#add-order').on('click', function () {

        $.ajax({
            type: 'POST',
            data: {"id":3, "age": $age.val(), "name":$name.val()},
            url: 'http://rest.learncode.academy/api/johnbob/friends',
            success: function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://rest.learncode.academy/api/johnbob/friends',
                    success: function (data) {
                        $friends.html("");
                        console.log("I have friends!", data);
                        $.each(data, function(i, name){
                            $friends.append('<li>Name: '+ name.name + '<br />' + ' Age:' + name.age +'</li>');
                        })
                    },
                    error: function () {
                        alert("error loading data");
                    }
                });
            },
            error: function () {
                alert("error loading data");
            }
        });
    });

然而，每当我试图使用相同的东西删除它们时，我都会在数据集上得到一个404错误。

    $('#deleteButton').on('click', function () {
        $.ajax({
            type: 'DELETE',
            data: { "id": 3, "age": $age.val(), "name": $name.val() },
            url: 'http://rest.learncode.academy/api/johnbob/friends',
            success: function () {
                //no data...just a success (200) status code
                console.log('Friend Deleted Successfully!');
            }
        });
    });

它从用户输入的两个输入框中提取年龄和姓名。

这是整个javascript文件。

<script>
$(function () {
    var $friends = $('#friends');
    var $name = $('#name');
    var $age = $('#age');
    $.ajax({
        type: 'GET',
        url: 'http://rest.learncode.academy/api/johnbob/friends',
        success: function (data) {
            console.log("I have friends!", data);
            $.each(data, function(i, name){
                $friends.append('<li>Name: '+ name.name + '<br />' + ' Age:' + name.age +' </li>');
            })
        },
        error: function () {
            alert("error loading data");
        }
    });
    $('#add-order').on('click', function () {

        $.ajax({
            type: 'POST',
            data: {"id":3, "age": $age.val(), "name":$name.val()},
            url: 'http://rest.learncode.academy/api/johnbob/friends',
            success: function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://rest.learncode.academy/api/johnbob/friends',
                    success: function (data) {
                        $friends.html("");
                        console.log("I have friends!", data);
                        $.each(data, function(i, name){
                            $friends.append('<li>Name: '+ name.name + '<br />' + ' Age:' + name.age +'</li>');
                        })
                    },
                    error: function () {
                        alert("error loading data");
                    }
                });
            },
            error: function () {
                alert("error loading data");
            }
        });
    });
    $('#deleteButton').on('click', function () {
        $.ajax({
            type: 'DELETE',
            data: { "id": 3, "age": $age.val(), "name": $name.val() },
            url: 'http://rest.learncode.academy/api/johnbob/friends',
            success: function () {
                //no data...just a success (200) status code
                console.log('Friend Deleted Successfully!');
            }
        });
    });
    });
</script>

以及HTML

<div class="large-6 columns" id="ajaxContainer">
        <h1>
            AJAX Container
        </h1>
        <h3>Manage Friends</h3>
        <p>
            Name:
            <input type="text" id="name" />
        </p>
        <p>
            Age:
            <input type="text" id="age" />
        </p> 
        <div class="row">
            <div class="large-6 columns">
                <button id="add-order">Submit</button>
            </div>
            <div class="large-6 columns">
                <a href="#" id="deleteButton" class="button [secondary success alert]">Delete Entry</a>
            </div>
        </div>
        <div class="row">
            <div class="large-3 columns">
                <div data-alert class="alert-box success radius">
                    ADDED
                    <a href="#" class="close">&times;</a>
                </div>
            </div>
            <div class="large-3 columns end">
                <div data-alert class="alert-box alert round" id="removeBox">
                    REMOVED
                    <a href="#" class="close">&times;</a>
                </div>
            </div>
        </div>
        <ul id="friends"></ul>
    </div>
    <div class="large-6 columns">
        <div id="clockHolder">
            <h1>Clock</h1>
            <h4>The page will not refresh when data is added</h4>
        <label id="minutes">00</label><label>:</label><label id="seconds">00</label>
        <span id="time"></span>
        <script type="text/javascript">
            var minutesLabel = document.getElementById("minutes");
            var secondsLabel = document.getElementById("seconds");
            var totalSeconds = 0;
            setInterval(setTime, 1000);
            function setTime() {
                ++totalSeconds;
                secondsLabel.innerHTML = pad(totalSeconds % 60);
                minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
            }
            function pad(val) {
                var valString = val + "";
                if (valString.length < 2) {
                    return "0" + valString;
                }
                else {
                    return valString;
                }
            }
        </script>
            <p>
                Quisque in mi sed neque volutpat sollicitudin. Cras mauris nunc, egestas non tristique sed, ultrices facilisis ex. Vestibulum ante enim, auctor vitae convallis nec, blandit ac risus. Nunc nec mi sit amet turpis tempus posuere eget eget dolor. Mauris fermentum velit odio, et sollicitudin velit sollicitudin id. Proin feugiat mauris lorem, a ornare velit mollis at. Quisque in enim feugiat, mattis enim et, congue lorem. Curabitur eu imperdiet nisl. Proin lacinia id ex ut vulputate. Aliquam porta purus elit, eget maximus felis mattis eu. Etiam ornare nibh venenatis, suscipit turpis nec, ullamcorper ligula. Sed iaculis risus eu neque fringilla rutrum.
            </p>
            <p>
                Donec vitae turpis convallis, commodo leo ut, tristique metus. Aliquam id nibh nec ligula suscipit vehicula sit amet non nulla. Nam at orci erat. Mauris viverra, velit quis porttitor malesuada, nunc mauris cursus eros, id commodo sapien arcu malesuada lacus. Donec fringilla vehicula ornare. Nullam accumsan tortor ut varius mattis. Vestibulum volutpat et ipsum scelerisque lobortis. Donec sit amet arcu sed tellus luctus tincidunt
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis risus, consequat elementum laoreet sed, tincidunt in turpis. Morbi malesuada varius risus, sit amet cursus neque faucibus non. Sed sollicitudin turpis eget ligula feugiat, non feugiat urna placerat. Nunc vehicula ligula vitae elementum lobortis. Duis feugiat mattis felis in porta. Pellentesque sit amet odio quis leo condimentum posuere nec id orci. Maecenas mattis sit amet ipsum vitae finibus. Donec ut aliquet justo. Donec ornare sollicitudin enim, a volutpat erat condimentum in. Vivamus consequat eleifend leo, sed finibus est sollicitudin id. Proin ultrices odio at diam sodales, ut egestas neque feugiat.
            </p>
        </div>
    </div>