1.XxDao.xml
</select>
<select id="selectXxById" parameterType="int" resultType="xx">
select * from xx where id=#{id}
</select>
<update id="updateXx" parameterType="com.pro.domain.Xx">
update xx set content=#{content} where id=#{id}
</update>
2.XxDao
public Xx selectXxById(Integer id);
public void updateXx(Xx xx);
3.XxService
public Xx getXx(Integer id);
public void modifyXx(Xx xx);
XxServiceImpl
@Override
public Xx getXx(Integer id) {
return xxDao.selectXxById(id);
}
@Override
public void modifyXx(Xx xx) {
xxDao.updateXx(xx);
}
4.XxController
@GetMapping("/getXx")
@ResponseBody
public Object getXx(Integer id) {
Xx xx = xxService.getXx(id);
return xx;
}
@PutMapping("/update")
@ResponseBody
public Object update(Xx xx) {
xxService.modifyXx(xx);
return "update success";
}
5.前端index.ftl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="/ssm-1/resources/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
$('#bt').click(function () {
$.ajax({
url: 'getXxs',
type: 'get',
dataType: 'json',
success: function (data) {
var html = '<table>';
for (var i = 0; i < data.length; i++) {
html += '<tr><td>' + data[i].id + '<tr><td>' + data[i].content + '<tr><td>';
}
html += '</table>';
console.log(html);
$('#contents').html(html);
}
});
});
$('#add').click(function () {
$.ajax({
url: 'addXx',
type: 'post',
dataType: 'json',
data: $('#frm').serialize(),
success: function (data) {
if (data != null) {
if (data.status == 1) {
$('#info').text(data.msg) + "," + data.data.id;
} else {
$('#info').text(data.msg);
}
}
}
});
});
$('#update').click(function () {
$.ajax({
url: 'update',
type: 'put',
dataType: 'json',
data: $('#frm').serialize(),
success: function (data) {
$("#info").text(data);
}
});
});
$('.se').click(function () {
var id = $(this).attr("xid");
$.ajax({
url: 'getXx',
type: 'get',
dataType: 'json',
data: {"id": id},
success: function (data) {
$('#content').val(data.content)
$('#id').val(data.id)
}
});
});
});
function f(v) {
var xid = v.getAttribute("xid");
$.ajax({
url: 'getXx',
type: 'get',
dataType: 'json',
data: {"id": xid},
success: function (data) {
$('#content').val(data.content)
$('#id').val(data.id)
}
})
}
</script>
</head>
<body>
<form action="?" method="post" id="frm">
<table border="1" width="500">
<caption><span id="info"></span></caption>
<tr>
<td>content:</td>
<td>
<input type="text" name="id" id="id">
<input type="text" name="content" id="content">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" id="add" value="添加">
<input type="button" id="update" value="修改">
</td>
</tr>
</table>
</form>
<input type="button" id="bt" value="查看所有"/>
<br>
<div id="contents">
<table border="1" width="500">
<#list xxList as xx>
<tr>
<td>${xx.id}<a href="#" onclick="f(this);return false;" xid="${xx.id}">修改</a></td>
<td>${xx.id}<input type="button" class="se" xid="${xx.id}" value="修改"></td>
<td>${xx.content}</td>
</tr>
</#list>
</table>
</div>
</body>
</html>
一种a标签添加 一种利用button添加 两种ajax写法