Javascript 如何使用AJAX删除项目_Javascript_Jquery_Ajax

Javascript 如何使用AJAX删除项目

javascript jquery ajax

Javascript 如何使用AJAX删除项目,javascript,jquery,ajax,Javascript,Jquery,Ajax,我正在学习使用AJAX 我可以使用它们提供的API轻松地添加新条目。我想现在删除条目。然而，每当我输入他们给我的地址时，我都会得到一个错误这是我正在使用的数据集每当我发布到这个，我可以看到一切都很好。此函数用于添加新记录 $('#add-order').on('click', function () { $.ajax({ type: 'POST', data: {"id":3, "age": $age.val()

我正在学习使用AJAX

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

这是我正在使用的数据集

每当我发布到这个，我可以看到一切都很好。此函数用于添加新记录

    $('#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");
            }
        });
    });

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

这是整个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>


$（函数（）{
var$friends=$（“#friends”）；
变量$name=$（'#name'）；
var$age=$（“#age”）；
$.ajax({
键入：“GET”，
网址：'http://rest.learncode.academy/api/johnbob/friends',
成功：功能（数据）{
log（“我有朋友！”，数据）；
$.each（数据、函数（i、名称）{
$friends.append（'Name:'+Name.Name+'
'+'Age:'+Name.Age+''）；
})
},
错误：函数（）{
警报（“加载数据错误”）；
}
});
$（“#添加顺序”）。在（'click'，函数（）{
$.ajax({
键入：“POST”，
数据：{“id”：3，“age”：$age.val（），“name”：$name.val（）}，
网址：'http://rest.learncode.academy/api/johnbob/friends',
成功：函数（）{
$.ajax({
键入：“GET”，
网址：'http://rest.learncode.academy/api/johnbob/friends',
成功：功能（数据）{
$friends.html（“”）；
log（“我有朋友！”，数据）；
$.each（数据、函数（i、名称）{
$friends.append（'Name:'+Name.Name+'
'+'Age:'+Name.Age+''）；
})
},
错误：函数（）{
警报（“加载数据错误”）；
}
});
},
错误：函数（）{
警报（“加载数据错误”）；
}
});
});
$（'deleteButton'）。在（'click'，函数（）{
$.ajax({
键入：“删除”，
数据：{“id”：3，“age”：$age.val（），“name”：$name.val（）}，
网址：'http://rest.learncode.academy/api/johnbob/friends',
成功：函数（）{
//没有数据…只有一个成功（200）状态代码
log（'Friend Deleted Successfully！'）；
}
});
});
});

还有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>


AJAX容器
管理朋友

姓名：


年龄：

提交
补充
远离的

钟
添加数据时，页面将不会刷新
00:00
var minutesLabel=document.getElementById（“分钟”）；
var secondsLabel=document.getElementById（“秒”）；
var totalSeconds=0；
设置间隔（设置时间，1000）；
函数setTime（）{
++总秒数；
secondsLabel.innerHTML=pad（总秒数%60）；
minutesLabel.innerHTML=pad（parseInt（totalSeconds/60））；
}
功能板（val）{
var valString=val+“”；
如果（valString.length<2）{
返回“0”+valString；
}
否则{
返回valString；
}
}

在我的书里，有一个叫帕特·索利西图丁的书斋。毛里斯·努克先生，非三联症患者，前庭手术前的辅助性手术，新生命拍卖人，温和的患者。我不能坐在一辆破车上。Mauris Feurgenum velit odio，et sollicitudin velit sollicitudin id.在Mauris lorem家族中，一种叫ornare velit mollis的植物。《恩尼王朝》中的奎斯克、马蒂斯·恩尼和《康格·洛伦》。库拉比图尔尼塞尔。丙氨酸蛋白酶原。这是一个很好的例子。维尼那提斯岛、纽卡斯岛、乌兰科珀岛。这是一种新的植物。


多纳克·维塔斯·康瓦利斯、康莫·利奥·乌特、特里斯蒂克·梅特斯。这是一种非空的交通工具。不结盟运动在奥奇埃拉特。Mauris viverra，velit Qus porttitor malesuada，nunc Mauris cursus eros，id commodo sapien arcu malesuada lacus。多奈克·弗林吉亚·奥纳雷。马蒂斯静脉曲张。蜗壳前庭和同侧前庭。不要坐在一个小地方


Lorem ipsum dolor sit amet，是一位杰出的献身者。猫咪女仆，劳里特元素顾问，turpis的tincidunt。Morbi malesuada varius risus，坐在amet cursus neque faucibus non。这是一种封建的、非封建的宗教信仰。小叶元素生命之舌。波尔塔的杜伊斯·费吉亚特·马蒂斯·费利斯。佩伦茨克坐在阿梅特·奥迪奥·奎斯·利奥的调味品旁。梅塞纳斯·马蒂斯坐在我的右边。别这样。Donec ornare sollicitudin enim是意大利的一种蜗牛调味品。利奥的生命，是我生命中的最后一刻。我的生命，是在我们的家族中的最后一刻。

我想我发现了问题，你不应该发送要删除的帖子id

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

$('#deleteButton').on('click', function () {
   var id = 5;
   $.ajax({
      type: 'DELETE',
      url: 'http://rest.learncode.academy/api/johnbob/friends/' + id ,
      success: function() {
         console.log('Friend Deleted Successfully!');
      }
   });
});