这篇文章主要为大家详细介绍了使用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.idfunction 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增删改查数据的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！