我正在使用
学习AJAXRESTful API by LearnCode.academy
我可以使用他们提供的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">×</a>
</div>
</div>
<div class="large-3 columns end">
<div data-alert class="alert-box alert round" id="removeBox">
REMOVED
<a href="#" class="close">×</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>
答案 0 :(得分：1)
我认为我发现了问题，您不应该在数据选项中发送要删除的帖子的ID。相反，你应该在URL中发送它
以下是删除ID为
的帖子的示例$('#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!');
}
});
});
更新 使用工作删除按钮制作提琴手：http://jsfiddle.net/Sbt75/660/