ajax增刪改查數(shù)據(jù)

這篇文章主要為大家詳細(xì)介紹了使用ajax增刪改查數(shù)據(jù)的方法，文中示例代碼介紹的非常詳細(xì)，零基礎(chǔ)也能參考此文章，感興趣的小伙伴們可以參考一下。

function $(id) {
    //  獲取html中所有id
    return document.getElementById(id);
}
let wq_content = $("wq-content"); // 問題
let wq_where = $("wq-where"); // 問題在哪
let wq_idea = $("wq-idea"); // 問題想法
let wq_save_question = $("wq-save-question"); // 提交按鈕
let tbody = $("tbody"); // 顯示區(qū)域
let wq_in = $("in") //  填空區(qū)
let add_wq = $("add-wq") // 添加按鈕

//  封裝提交/修改函數(shù)   連個(gè)參數(shù)1.url   2.id
function aUrl(urls, ids) {
    //  創(chuàng)建變量data存放用戶輸入內(nèi)容
    let data = {
        "id": ids,
        "wq_content": wq_content.value,
        "wq_where": wq_where.value,
        "wq_idea": wq_idea.value,
    };

    //  調(diào)用ajax發(fā)送數(shù)據(jù)
    ajax1({
        url: urls,
        type: "post",
        data: data,
        fn: function(data) {
            if (data == 1) {
                //  數(shù)據(jù)保存成功
                location.reload(); // 刷新
            } else {
                alert("數(shù)據(jù)保存失敗,請(qǐng)重試");
            }
        }
    })
}

//  當(dāng)點(diǎn)擊添加按鈕時(shí),將提交按鈕改為提交,點(diǎn)擊提交時(shí)執(zhí)行添加命令
add_wq.onclick = function() {
    wq_save_question.innerHTML = "提交";
    //  提交添加點(diǎn)擊事件    
    wq_save_question.onclick = function() {
        //  調(diào)用封裝函數(shù)傳參(不用傳id)
        aUrl("php/addData.php");
    }
}

//  顯示數(shù)據(jù)        只有顯示出數(shù)據(jù)才能刪除和修改
ajax1({
    url: "php/showData.php",
    type: "get",
    fn: function(data) {
        //  字符串格式轉(zhuǎn)換成json格式
        data = JSON.parse(data);

        let str = ""; //    放數(shù)據(jù)
        let count = ""; //  計(jì)數(shù)

        //  遍歷導(dǎo)入
        data.forEach(item => {
            count++;
            str +=
                `
                <tr class="text-center middle">
                        <td>${count}</td>
                        <td>${item.wq_content}</td>
                        <td>${item.wq_where}</td>
                        <td>
                            <a 
                                href="#" 
                                data-toggle="popover"
                                data-content="**過長(zhǎng)內(nèi)容詳情(bootstrap會(huì)處理點(diǎn)擊顯示)**" 
                            >${item.wq_idea}
                            </a>
                        </td>
                        <td>
                            <button class="btn delBtn" data-id="${item.id}">刪除</button>
                        </td>
                        <td>
                            <button class="btn btn-default xiugai" data-toggle="modal" data-target=".wq-add" data-id="${item.id}">
                                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                            </button>
                        </td>
                    </tr>
            `;
        })
        tbody.innerHTML = str; //上樹

        //  修改數(shù)據(jù)
        //  獲取當(dāng)前點(diǎn)擊的是哪個(gè)id的修改按鈕
        //  取出原值填入框中,進(jìn)行修改
        //  點(diǎn)擊保存,執(zhí)行修改操作
        let xiugai = document.querySelectorAll(".xiugai"); //   在79行生成按鈕時(shí),添加了個(gè)類名
        for (let i = 0; i < xiugai.length; i++) {
            xiugai[i].onclick = function() {

                //  獲取id
                let id = xiugai[i].getAttribute("data-id");

                //  修改提交按鈕為保存   這里有兩個(gè)目的:1.改按鈕名字 2.區(qū)分當(dāng)前彈框是添加功能還是修改功能***
                wq_save_question.innerHTML = "保存";

                //  獲取原數(shù)據(jù)
                let wq_content_old = xiugai[i].parentNode.parentNode.children[1].innerText;
                let wq_where_old = xiugai[i].parentNode.parentNode.children[2].innerText;
                let wq_idea_old = xiugai[i].parentNode.parentNode.children[3].innerText;
                // console.log(wq_content_old )
                // console.log(wq_where_old )
                // console.log(wq_idea_old )

                //  填入原數(shù)據(jù)   判斷為保存說明是修改功能
                if (wq_save_question.innerHTML = "保存") {
                    // 將原數(shù)據(jù)還原到彈框中
                    wq_content.value = wq_content_old;
                    wq_where.value = wq_where_old;
                    wq_idea.value = wq_idea_old;

                    //  當(dāng)按鈕為保存時(shí),點(diǎn)擊保存(執(zhí)行修改命令)
                    wq_save_question.onclick = function() {
                        //  調(diào)用封裝函數(shù)傳參(需要傳id)
                        aUrl("php/updataData.php", id);
                        // console.log(id)
                    }
                }
            }
        }

        //  刪除數(shù)據(jù)
        let delBtns = document.querySelectorAll(".delBtn");
        //  循環(huán)判斷點(diǎn)擊的是哪個(gè)刪除
        for (let i = 0; i < delBtns.length; i++) {
            delBtns[i].onclick = function() {

                //  獲取當(dāng)前按鈕的id
                let id = delBtns[i].getAttribute("data-id");
                // console.log(id)

                //  調(diào)用ajax執(zhí)行刪除          這里也可以調(diào)用封裝函數(shù)實(shí)現(xiàn)
                ajax1({
                    url: "php/delData.php",
                    type: "get",
                    data: {
                        id: id
                    },
                    fn: function(data) {
                        //  移出dom節(jié)點(diǎn)
                        if (data = 1) {
                            //  數(shù)據(jù)庫(kù)刪除成功后,將頁(yè)面上的節(jié)點(diǎn)刪除
                            tbody.removeChild(delBtns[i].parentNode.parentNode);
                        } else {
                            alert("刪除失敗");
                        }
                    }
                })
            }
        }
    }
})

看完上述內(nèi)容，你們掌握使用ajax增刪改查數(shù)據(jù)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！