您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要为大家详细介绍了使用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增删改查数据的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。