Я некоторое время возился с учебниками по AJAX и создал простое приложение, которое использует файл JSON в качестве элементарной базы данных.
Однако, при добавлении нового элемента (который выполняет запрос POST), он показывает следующее:
jquery.js:9600 POST http://127.0.0.1:5500/ajax/data/todo 405 (Method Not Allowed)
Мой JS-файл:
window.onload = function() {
let newTodo = document.querySelector("#new-todo").value;
let display = document.querySelector("#display");
let doneButton = document.querySelector("#newDone");
$.ajax({
type: "GET",
url: "data/todo.json",
success: function(todo) {
todo.forEach(item => {
li = document.createElement("li");
li.innerHTML = item.todo;
display.appendChild(li);
});
},
error: function() {
alert("An error occurred!");
}
});
doneButton.addEventListener("click", function() {
let item = {
todo: newTodo
};
newFunction(item, display);
});
}
function newFunction(item, display) {
$.ajax({
type: "POST",
url: "data/todo",
data: item,
success: function (todo) {
todo.forEach(item => {
li = document.createElement("li");
li.innerHTML = item.todo;
display.appendChild(li);
});
},
error: function() {
alert("An Error Occurred!");
}
});
}
И HTML, если вам это нужно:
<!DOCTYPE html>
<html>
<head>
<title>AJAX</title>
<style>/*
#newDone {
height: 40px;
width: 60px;
} */
</style>
</head>
<body>
<h1>TO-DO JS APP</h1>
<span id = "new">Enter new todo:
<input type="text" id="new-todo" placeholder="NEW TODO"><button id="newDone">Done</button>
</span>
<ul id="display">
</ul>
<script src="jquery.js"></script>
<script src="main.js"></script>
</body>
</html>
Я проверил путь к файлу, и он правильный. Есть идеи как это исправить?