ssm框架增删查改用ajax一个页面完成

对于使用SSM框架，通过Ajax实现增删查改的功能可以在一个页面完成，下面是一个示例：

首先，在页面中引入jQuery库和相关的JS文件。

<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>

接下来，编写页面的HTML结构，包括表单和展示数据的表格。

<form id="myForm">
    <input type="text" id="name" placeholder="姓名">
    <input type="text" id="age" placeholder="年龄">
    <button id="addBtn">添加</button>
</form>

<table id="dataTbl">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="dataBody">
        <!-- 数据行动态生成 -->
    </tbody>
</table>

然后，编写JavaScript代码，使用Ajax与后端进行交互。

<script>
    // 添加数据
    $('#addBtn').click(function() {
        var name = $('#name').val();
        var age = $('#age').val();
        
        $.ajax({
            url: 'add', // 后端添加数据接口的URL
            type: 'POST',
            data: {
                name: name,
                age: age
            },
            success: function(result) {
                // 添加成功后，刷新数据表格
                refreshTable();
            }
        });
    });
    
    // 删除数据
    $('body').on('click', '.deleteBtn', function() {
        var id = $(this).attr('data-id');
        
        $.ajax({
            url: 'delete', // 后端删除数据接口的URL
            type: 'POST',
            data: {
                id: id
            },
            success: function(result) {
                // 删除成功后，刷新数据表格
                refreshTable();
            }
        });
    });
    
    // 查询数据
    function refreshTable() {
        $.ajax({
            url: 'query', // 后端查询数据接口的URL
            type: 'GET',
            success: function(result) {
                // 清空表格数据
                $('#dataBody').empty();
                
                // 动态生成表格数据
                for (var i = 0; i < result.length; i++) {
                    var item = result[i];
                    var tr = $('<tr></tr>');
                    tr.append('<td>' + item.name + '</td>');
                    tr.append('<td>' + item.age + '</td>');
                    tr.append('<td><button class="deleteBtn" data-id="' + item.id + '">删除</button></td>');
                    $('#dataBody').append(tr);
                }
            }
        });
    }
    
    // 页面加载完成后，刷新数据表格
    $(document).ready(function() {
        refreshTable();
    });
</script>

最后，编写后端的Controller，处理前端发送的请求。

@Controller
public class MyController {
    
    @Autowired
    private MyService myService;
    
    @RequestMapping("/add")
    @ResponseBody
    public String addData(String name, int age) {
        // 调用Service层的方法，添加数据
        myService.addData(name, age);
        
        return "success";
    }
    
    @RequestMapping("/delete")
    @ResponseBody
    public String deleteData(int id) {
        // 调用Service层的方法，删除数据
        myService.deleteData(id);
        
        return "success";
    }
    
    @RequestMapping("/query")
    @ResponseBody
    public List<MyData> queryData() {
        // 调用Service层的方法，查询数据
        List<MyData> dataList = myService.queryData();
        
        return dataList;
    }
}

在示例中，通过Ajax与后端进行交互，实现了在一个页面中完成数据的增删查功能。需要根据自己的业务逻辑做相应的调整和修改。