jquery与ajax实现增删改查
jquery与ajax实现增删改查对于本项目，jquery与ajax实现当前页面的增删改查jquery获取当前页面的数据，ajax与后台接口进行连接，将后台数据返回到前端，将前端数据送回后台准备操作：1.将项目上传到云服务器上，并且通过java -jar xxx.jar命令行运行当前jar包。运行成功后，打开http://ip:端口号/swagger-ui.html页面查看接口。2.连接云服务器数
·
jquery与ajax实现增删改查
对于本项目，jquery与ajax实现当前页面的增删改查
jquery获取当前页面的数据，ajax与后台接口进行连接，将后台数据返回到前端，将前端数据送回后台
准备操作：
1.将项目上传到云服务器上，并且通过 java -jar xxx.jar命令行运行当前jar包。运行成功后，打开http://ip:端口号/swagger-ui.html页面查看接口。
2.连接云服务器数据库
新建数据库，xxtx,将sql文件导入进来。导入成功之后，给当前云服务器的数据库创建用户名和用户密码，该用户名和用户密码要与jar包中对数据库的配置的用户名和密码一样，然后对这个用户进行一些分配权限的配置。
3.可以编写前端简单的前端页面
比如登录页面和用户信息的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行学天下</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="../../jquery-3.1.1.js"></script>
</head>
<body>
<div class="input-group flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping">用户名</span>
</div>
<input id="username" type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
</div>
<div class="input-group flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping">输入框</span>
</div>
<input id="password" type="password" class="form-control" placeholder="password" aria-label="Username" aria-describedby="addon-wrapping">
</div>
<button type="button" class="btn btn-lg btn-primary">登录</button>
</body>
<script>
function login() {
// console.log("sss");
var obj = {
username: $("#username").val(),
password: $("#password").val()
}
// console.log(obj);
$.ajax({
url: "http://ip:端口号/user/login",
method: "post",
contentType: "application/json",
data: JSON.stringify(obj),
success: function(res) {
// console.log(res);
sessionStorage.setItem("token", res.data.token)
$(location).attr("href", "./index.html");
// // 获取用户信息
// $.ajax({
// url: "http://ip:端口号/user/info?token=" +sessionStorage.getItem("token"),
// contentType: "application/json",
// headers: {
// " Authorization": Authorization
// },
// success: function(res) {
// console.log(res);
// }
// })
}
});
}
$("button").click(login);
</script>
</html>
</html>
然后可以对首页进行编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行学天下-首页</title>
<script src="./js/jquery.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
html,
body,
.main {
width: 100%;
height: 100%;
}
.top {
width: 100%;
background-color: rgb(229, 245, 220);
color: grey;
font-size: 30px;
height: 70px;
line-height: 70px;
box-sizing: border-box;
}
.user {
float: right;
}
.bottom {
width: 100%;
height: calc(100% - 70px);
}
.bottom-left {
width: 170px;
background-color: rgb(204, 204, 59);
height: 100%;
float: left;
}
.bottom-left li {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #629739;
color: white;
font-size: 18px;
cursor: pointer;
border-bottom: 1px solid rgb(241, 234, 234);
}
.bottom-left li:hover {
background-color: #629586;
}
.bottom-right {
width: calc(100% - 170px);
float: left;
background-color: rgb(248, 185, 103);
height: 100%;
}
.content {
width: 98%;
height: 98%;
background-color: white;
margin-left: 1%;
margin-top: 1%;
border-radius: 5px;
padding: 1%;
}
</style>
</head>
<body>
<div class="main">
<div class="top">
<span>行学天下后台管理系统</span>
<div class="user">
欢迎xxx
</div>
</div>
<div class="bottom">
<div class="bottom-left">
<ul>
<li>用户管理</li>
<li>栏目管理</li>
<li>项目管理</li>
</ul>
</div>
<div class="bottom-right">
<div class="content">
</div>
</div>
</div>
</div>
</body>
<script>
$(function() {
$(".bottom-left li:first").trigger('click');
$(".bottom-left ul").on({
click: function() {
// console.log($(this).text());
if ($(this).text() === '栏目管理') {
$(".content").load('./column.html');
} else if ($(this).text() === "用户管理") {
$(".content").load('./user.html')
} else if ($(this).text() === '项目管理') {
$(".content").load('./project.html')
}
}
}, "li");
})
</script>
</html>
</html>
首页效果图
当我们点击侧边栏时，侧边栏的内容能够在右侧的内容框中显示
点击用户管理，实现效果如下：
用户管理的静态页面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户管理</title>
<!-- jQuery -->
<script src="./js/jquery.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.css" rel="stylesheet">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.js"></script>
</head>
<body>
<div class="header">用户管理</div>
<!-- Button trigger modal -->
<!-- Button trigger modal -->
<!-- data-bs-target="#myModal" -->
<button type="button" class="btn btn-primary" id="addUserBtn">新增
<button type="button" class="btn btn-danger" id="delAllUser">
批量删除
</button>
<table class="table">
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>密码</th>
<th>电话</th>
<th>真实姓名</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- Modal -->
<!-- class=fade -->
<div class="modal" id="myModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">新增用户</h5>
<button type="button" id="modalClose" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="form-horizontal">
<div class="form-group">
<label for="input1">
姓名
</label>
<input type="text" class="form-control" name="username">
<label for="input2">
密码
</label>
<input type="password" class="form-control" name="password">
<label for="input1">
电话号码
</label>
<input type="text" class="form-control" name="telephone">
<label for="input2">
真实姓名
</label>
<input type="text" class="form-control" name="realname">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="saveModelCancel" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="saveModelConfirm">确定</button>
</div>
</div>
</div>
</div>
</body>
</html>
实现查找所有用户信息
1.使用ajax实现向后台接口发送请求，请求成功后，会将返回过来的数据进行一个封装，可以在ajax中设置请求成功后的回调函数，在回调函数中，可以将每条数据存放在表格中，这时我们就可以新建tbody中的内容了，用来存放后台传过来的数据。
代码如下：
// 查询所有用户信息
function loadAllUser() {
$("tbody").empty();
$.ajax({
url: baseURL + "/baseUser/findAll",
headers: {
"Authorization": sessionStorage.getItem('token')
},
success: function(res) {
console.log(res);
res.data.forEach(function(item) {
console.log(item);
var newTr = $(`<tr>
<td>
<input type="checkbox" value = ` + item.id + ` \/>
</td>
<td>
` + item.username + `
</td>
<td>
` + item.password + `
</td>
<td>
` + item.telephone + `
</td>
<td>
` + item.realname + `
</td>
<td class="opration">
<span class="edit">编辑</span>
<span class="del">删除</span>
</td>
</tr>`)
$('tbody').append(newTr);
});
}
});
}
删除用户信息
当用户点击删除时，首先会获得该行数据的id，将id传入后台，根据id去删除数据，获取完id后，使用ajax对后台接口进行操作。
ajax中一般包括url,headers,method(发送数据给后台时需要)，success(请求成功后的回调函数),error(求失败后的回调函数)，data(传入后台的数据)
我觉得比较困难的是如何去找到我们所需要的节点。
代码如下：
function delUser() {
// alert("333");
// console.log(this);
var inputId = $(this)[0].parentElement.parentElement.firstElementChild.firstElementChild;
// console.log(inputId);
// 获取id值
var id = $(inputId).val();
// console.log(id);
// ajax请求后台操作
$.ajax({
url: baseURL + "/baseUser/deleteById?id=" + id,
headers: {
"Authrization": sessionStorage.getItem('token')
},
success: function(res) {
alert(res.message);
alert("id为" + id + "的用户被删除");
loadAllUser();
}
})
}
添加用户信息
当用户点击添加按钮时，会弹出一个模态框，点击取消时，模态框关闭，点击X时，模态框也关闭，当点击确定时，会首先获取模态框中管与输入框的内容（id的值数据自动插入的，不需要获取），然后将输入框中的内容封装到一个对象中，之后再使用ajax对后台接口进行请求，最后重新加载当前页面，并清空模态框中的内容。
// 点击X按钮关闭当前模态框
$("#modalClose").click(function() {
clearInput();
$("#myModal").hide();
});
// 点击取消按钮关闭当前模态框
$("#saveModelCancel").click(function() {
clearInput();
$("#myModal").hide();
});
// 点击模态框中确定按钮，向后台发送请求
$("#saveModelConfirm").on({
click: addUser
});
function addUser() {
// alert("hhh");
// 获取输入框中的值
var username = $("input[name=username]").val();
var password = $("input[name=password]").val();
var telephone = $("input[name=telephone]").val();
var realname = $("input[name=realname]").val();
var obj = {
username,
password,
telephone,
realname
}
// ajax请求
$.ajax({
url: baseURL + "//baseUser/saveOrUpdate",
method: "post",
headers: {
"Authorization": sessionStorage.getItem('token')
},
data: obj,
success: function(res) {
alert(res.message);
// 将模态框进行隐藏
$("#myModal").hide();
// 重新加载整个页面
loadAllUser();
clearInput();
}
})
// console.log(obj);
// console.log(username);
}
编辑当前被选中的用户信息
点击编辑时，获取当前数据的id,然后通过ajax向后台发送请求，然后将内容传到前台，再将这些数据绑定到模态框的输入框中。
（之前我的想法是这样的，先将前台页面当前行的数据进行获取，然后将前台的数据绑定到模态框中，点击确定按钮时，然后将模态框中的内容同id值一起封装到一个对象中，再使用ajax对后台的接口进行交互，但是，我所用的新增的接口和编辑的接口是一样的，这样就会导致后台认为id的值重复，出现当前用户已经被占用这个错误）
第二种想法的代码：
// 编辑当前选中用户
$("tbody").on({
click: editUser
}, ".edit");
function editUser() {
// console.log(this.innerHTML);
// 获取姓名等内容
var tr = $(this)[0].parentElement.parentElement;
var inputId = $(this)[0].parentElement.parentElement.firstElementChild.firstElementChild;
var id = $(inputId).val();
console.log(id);
var username = tr.children[1].innerText;
var password = tr.children[2].innerText;
var telephone = tr.children[3].innerText;
var realname = tr.children[4].innerText;
// 获取模态框输入框
$("input[name=username]").val(username);
$("input[name=password]").val(password);
$("input[name=telephone]").val(telephone);
$("input[name=realname]").val(realname);
var username = $("input[name=username]").val();
var password = $("input[name=password]").val();
var telephone = $("input[name=telephone]").val();
var realname = $("input[name=realname]").val();
var obj = {
id,
username,
password,
telephone,
realname
};
$("#myModal").show();
// 点击确定时
$("#saveModelConfirm").click(function() {
// 实现ajax请求
$.ajax({
url: baseURL + "/baseUser/saveOrUpdate",
method: "post",
headers: {
"Authorization": sessionStorage.getItem('token')
},
data: obj,
success: function(res) {
// alert(res.message);
// 将模态框进行隐藏
$("#myModal").hide();
// 重新加载整个页面
clearInput();
loadAllUser();
}
});
});
}
第一种想法的代码还没有编写
持续更新
实现批量删除
点击批量删除按钮，获取被选中的数据，属性值为checked，因为我的这个后台接口没有批量删除，所以我们就使用单个删除这个接口，使用map遍历
代码如下：
// 批量删除
// 1.获取批量删除按钮
//2.首先获取选中的id值
//3.根据id的值去一一实现删除功能
$("#delAllUser").on({
click: delAllUser
});
function delAllUser() {
// console.log("sss");
//2.首先获取选中的id值
var ids = $("input[type=checkbox]:checked");
ids.map(function(i, item) {
var id = $(item).val();
//3.根据id的值去一一实现删除功能
// 调用删除函数一一删除
delUser();
console.log("删除了" + id);
});
loadAllUser();
}
清空模态框中输入框中的内容
将模态框中的值设置为空字符串
代码：
// 清空输入框中的内容
function clearInput() {
$("input[name=username]").val("");
$("input[name=password]").val("");
$("input[name=telephone]").val("");
$("input[name=realname]").val("");
// alert("neirong");
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
13
0- 0
已为社区贡献1条内容
所有评论(0)