如何将JSON文件添加到我的wordpress服务器,如何使用添加的文本进行保存并读取aigan?

时间:2019-04-29 16:18:40

标签: javascript php json ajax wordpress

我想开发一个TODO列表,该列表可供我的小型编码团队使用。因此,必须将文件保存在服务器上,而不要保存在localStorage上。但是我该怎么办呢? 在文件获得新的列表项之后,每个登录到服务器的人都应该能够看到此内容。

我是javascript的初学者。但是我读到Ajax ist语言用于某些代码。 我不知道如何解决这个问题。

HTML

    <center>TODO: Website</center>
    <form id="form-website">
        <div class="input-group">
            <input id="input-todo-website" class="form-todo" placeholder="Füge hier eine Aufgabe hinzu">
            <span>
                <button id="btn-add" type="button" class="btn">Hinzufügen</button>
            </span>
        </div>
    </form>
    <div>
        <ul id="list-todo-website" class="list">

        </ul>
    </div>
    <div>
        <button id="btn-clear-website" type="button" class="btn">Löschen</button>
    </div>

JavaScript

window.onload = function() {
    //variables
    listNewsletter();
    listSonstiges();
    var form = document.getElementById("form-website");
    var input = document.getElementById("input-todo-website");
    var btn = document.getElementById("btn-add");
    var list = document.getElementById("list-todo-website");    
    var btnClr = document.getElementById("btn-clear-website");  
    var btnClrSonstiges = document.getElementById("btn-add-sonstiges");
    var id = 1;
    // listItem = {item: "todo item", checked: flase}
    var liItemWebsite = "";
    var todoListWebsite = [];

    //button event listener
    btn.addEventListener("click", addTodoItemWebsite);

    //list event listener
    list.addEventListener("click", boxCheckedWebsite);

    //event listener for clear list
    btnClr.addEventListener("click", clearListWebsite);

    if(localStorage.length <= 0) {
        btnClr.style.display = "none";
    }

    //checking localstorage has data
    if(localStorage.length > 0) {
        displayListWebsite();
    }


    //add todo item to list
    function addTodoItemWebsite() {
        if(input.value === "") {
            alert("Du musst eine Aufgabe hinzufügen!");
        }
        else {
            if(list.style.borderTop === "") {
                list.style.borderTop = "2px solid white";
                btnClr.style.display = "inline";
            }
            var text = input.value; 
            var item = `<li id="li-${id}">${text}<input id="box-${id}" class="checkboxes" type="checkbox"></li>`;               
            list.insertAdjacentHTML('beforeend', item); 
            liItemWebsite = {item: text, checked: false};
            todoListWebsite.push(liItemWebsite);        
            id++;
            addToLocalStorage()
            form.reset();
        }
    }

    //adding string through style to list itme
    function boxCheckedWebsite(event) {
        const element = event.target;
        if(element.type === "checkbox") {
            element.parentNode.style.textDecoration = "line-through";
            todoListWebsite = JSON.parse(localStorage.getItem("todoListWebsite"));
            todoListWebsite[element.id.split('-')[1]-1].checked = element.checked.toString();
            localStorage.setItem("todoListWebsite", JSON.stringify(todoListWebsite));
        }
    }

    //adding data to local storage
    function addToLocalStorage() {
        if(typeof(Storage) !== "undefined") {
            localStorage.setItem("todoListWebsite", JSON.stringify(todoListWebsite));
        }
        else {
            alert("Dein Browser unterstützt keinen 'LocalStorage'! Somit können deine Daten nicht gespeichert werden");
        }
    }

    function displayListWebsite() {
        list.style.borderTop = "2px solid white";
        todoListWebsite = JSON.parse(localStorage.getItem("todoListWebsite"));
        todoListWebsite.forEach(function(todoListWebsite) {
            console.log(todoListWebsite.item)
            var text = todoListWebsite.item;
            var item = `<li id="li-${id}">${text}<input id="box-${id}" class="checkboxes" type="checkbox"></li>`;
            list.insertAdjacentHTML("beforeend", item);

            if(todoListWebsite.checked) {
                var li = document.getElementById("li-"+id);
                li.style.textDecoration = "line-through";
                li.childNodes[1].checked = todoListWebsite.checked;
            }
            id++;
        });
    }

0 个答案:

没有答案