ajax增删改查数据

这篇文章主要为大家详细介绍了使用ajax增删改查数据的方法，文中示例代码介绍的非常详细，零基础也能参考此文章，感兴趣的小伙伴们可以参考一下。

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"); // 显示区域
let wq_in = $("in") //  填空区
let add_wq = $("add-wq") // 添加按钮

//  封装提交/修改函数   连个参数1.url   2.id
function aUrl(urls, ids) {
    //  创建变量data存放用户输入内容
    let data = {
        "id": ids,
        "wq_content": wq_content.value,
        "wq_where": wq_where.value,
        "wq_idea": wq_idea.value,
    };

    //  调用ajax发送数据
    ajax1({
        url: urls,
        type: "post",
        data: data,
        fn: function(data) {
            if (data == 1) {
                //  数据保存成功
                location.reload(); // 刷新
            } else {
                alert("数据保存失败,请重试");
            }
        }
    })
}

//  当点击添加按钮时,将提交按钮改为提交,点击提交时执行添加命令
add_wq.onclick = function() {
    wq_save_question.innerHTML = "提交";
    //  提交添加点击事件    
    wq_save_question.onclick = function() {
        //  调用封装函数传参(不用传id)
        aUrl("php/addData.php");
    }
}

//  显示数据        只有显示出数据才能删除和修改
ajax1({
    url: "php/showData.php",
    type: "get",
    fn: function(data) {
        //  字符串格式转换成json格式
        data = JSON.parse(data);

        let str = ""; //    放数据
        let count = ""; //  计数

        //  遍历导入
        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="**过长内容详情(bootstrap会处理点击显示)**" 
                            >${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; //上树

        //  修改数据
        //  获取当前点击的是哪个id的修改按钮
        //  取出原值填入框中,进行修改
        //  点击保存,执行修改操作
        let xiugai = document.querySelectorAll(".xiugai"); //   在79行生成按钮时,添加了个类名
        for (let i = 0; i < xiugai.length; i++) {
            xiugai[i].onclick = function() {

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

                //  修改提交按钮为保存   这里有两个目的:1.改按钮名字 2.区分当前弹框是添加功能还是修改功能***
                wq_save_question.innerHTML = "保存";

                //  获取原数据
                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 )

                //  填入原数据   判断为保存说明是修改功能
                if (wq_save_question.innerHTML = "保存") {
                    // 将原数据还原到弹框中
                    wq_content.value = wq_content_old;
                    wq_where.value = wq_where_old;
                    wq_idea.value = wq_idea_old;

                    //  当按钮为保存时,点击保存(执行修改命令)
                    wq_save_question.onclick = function() {
                        //  调用封装函数传参(需要传id)
                        aUrl("php/updataData.php", id);
                        // console.log(id)
                    }
                }
            }
        }

        //  删除数据
        let delBtns = document.querySelectorAll(".delBtn");
        //  循环判断点击的是哪个删除
        for (let i = 0; i < delBtns.length; i++) {
            delBtns[i].onclick = function() {

                //  获取当前按钮的id
                let id = delBtns[i].getAttribute("data-id");
                // console.log(id)

                //  调用ajax执行删除          这里也可以调用封装函数实现
                ajax1({
                    url: "php/delData.php",
                    type: "get",
                    data: {
                        id: id
                    },
                    fn: function(data) {
                        //  移出dom节点
                        if (data = 1) {
                            //  数据库删除成功后,将页面上的节点删除
                            tbody.removeChild(delBtns[i].parentNode.parentNode);
                        } else {
                            alert("删除失败");
                        }
                    }
                })
            }
        }
    }
})

看完上述内容，你们掌握使用ajax增删改查数据的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！