这篇文章主要为大家详细介绍了使用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 +=
`
${count}
${item.wq_content}
${item.wq_where}
${item.wq_idea}
`;
})
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增删改查数据的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
