2021-07-29ssm框架添加

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写法 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值