使用 ajax 将项目保存到数据库的待办事项列表答案

【问题标题】：To-Do list saving items to database using ajax使用 ajax 将项目保存到数据库的待办事项列表
【发布时间】：2021-10-26 21:01:04
【问题描述】：

我有一个可行的待办事项列表，但是当页面刷新时，所有添加的项目都会被删除。

起初我尝试使用本地存储来存储然后检索项目，但我无法让它工作。后来想起了ajax，但是我还是个初学者，对它不熟悉。

我找不到有效的解决方案，但任何提示都将不胜感激。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous">

    <title>Shopping List</title>

</head>
<body>
    <a href="logout.php">
        <button class="logout">Logout</button>
    </a>
    
        <header>
            <h1>Shopping List</h1>
        </header>

        <form>
            <input type="text" placeholder="Enter products" class="todo_input" />
            <button class="todo_button" type="submit">
                <i class="fas fa-plus-square"></i>
            </button>
            <div class="select">
                <select name="todos" class="filter_todo">
                    <option value="all">All</option>
                    <option value="completed">In cart</option>
                    <option value="uncompleted">Not in cart</option>
                </select>
            </div>
        </form>

        <div class="todo_container">
            <ul class="todo_list">
                <div class="todo">
                    <li class="todo_item">Tomatoes</li>
                    <button class="complete_btn"><i class="fas fa-check"></i></button>
                    <button class="delete_btn"><i class="fas fa-trash"></i></button>
                </div>   
            </ul>
        </div>

    <script src="script.js" type="application/javascript"></script>           

</body>
</html>

Javascript：

//selectors
const todoInput = document.querySelector('.todo_input');
const todoButton = document.querySelector('.todo_button');
const todoList = document.querySelector('.todo_list');
const filterOption = document.querySelector('.filter_todo');

//event listeners
todoButton.addEventListener("click", addTodo)
todoList.addEventListener("click", deleteCheck)
filterOption.addEventListener("click", filterTodo)

//functions
function addTodo(event) {
    event.preventDefault();

    //todo DIV
    const todoDiv = document.createElement('div');
    todoDiv.classList.add('todo'); 

    //todo LI 
    const newTodo = document.createElement('li');
    newTodo.innerText = todoInput.value;
    newTodo.classList.add('todo_item');
    todoDiv.appendChild(newTodo);
    if(todoInput.value === ""){
        return null
    }

    //check mark BUTTON
    const completedButton = document.createElement('button');
    completedButton.innerHTML = '<i class="fas fa-check"></i>';
    completedButton.classList.add('complete_btn')
    todoDiv.appendChild(completedButton);

    //delete BUTTON
    const deleteButton = document.createElement('button');
    deleteButton.innerHTML = '<i class="fas fa-trash"></i>';
    deleteButton.classList.add('delete_btn')
    todoDiv.appendChild(deleteButton);

    //Append to Actual LIST
    todoList.appendChild(todoDiv);

    //Clear todo input VALUE
    todoInput.value = ""
}

//DELETE & CHECK
function deleteCheck(e) {
    const item = e.target;

    //DELETE ITEM
    if (item.classList[0] === "delete_btn") {
        const todo = item.parentElement;

        //ANIMATION TRANSITION
        todo.classList.add("fall")
        todo.addEventListener('transitionend', function () {
            todo.remove()
        })
    }

    //COMPLETE ITEM
    if (item.classList[0] === "complete_btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completedItem")
    }
}

//FILTERING THE TASKS ACCORDING THE OPTION
function filterTodo(e) {
    const todos = todoList.childNodes;
    for(let i = 1; i<todos.length; i++ ){
        switch (e.target.value) {

            case "all":
                todos[i].style.display = "flex";
                break;

            case "completed":
                if (todos[i].classList.contains('completedItem')) {
                    todos[i].style.display = "flex";
                } else {
                    todos[i].style.display = "none";
                }
                break;
                
            case "uncompleted":
                if (!todos[i].classList.contains('completedItem')) {
                    todos[i].style.display = "flex";
                } else {
                    todos[i].style.display = "none";
                }
                break;
        }
    }
}

【问题讨论】：

欢迎来到这里。好吧，如果您不熟悉 Ajax，那么您可以开始一个在线教程来学习，尝试为您的用例实现它，如果您遇到问题，请在此处发布该特定问题。

标签： javascript html ajax

【解决方案1】：

例如，您可以使用 ajax 作为选项来发送请求以将数据保存在数据库中并获取记录以填充列表。语法有点简单：

            var data = ($("#YOUR_HTML_FORM_ID").serialize());
            $.ajax({
                url: 'YOUR_API_ROUTE',
                data: data,
                processData: false,
                type: 'POST',
                success: function ( data ) {
                    // All good here, do something like show a success message
                },
                error: function (data) {
                    data = JSON.parse(data.responseText);
                    // something went wrong

                }
            });

【讨论】：