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增删改查数据的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！