SpringMVC+Ajax实现商品名搜索前后端代码示例

本文提供一个简单示例，展示如何使用SpringMVC和Ajax实现通过商品名搜索商品的功能，包含后端控制器、服务层、数据访问层代码以及前端HTML代码。

1. 后端代码

Controller代码：

@Controller
public class GoodsController {

    @Autowired
    private GoodsService goodsService;

    /**
     * 通过商品名字查找商品
     * @param name 商品名字
     * @return 商品列表
     */
    @RequestMapping(value = "/searchGoods", method = RequestMethod.GET)
    @ResponseBody
    public List<Goods> searchGoods(@RequestParam String name) {
        return goodsService.findGoodsByName(name);
    }
}

Service代码：

@Service
public class GoodsServiceImpl implements GoodsService {

    @Autowired
    private GoodsDao goodsDao;

    @Override
    public List<Goods> findGoodsByName(String name) {
        return goodsDao.findGoodsByName(name);
    }
}

Dao代码：

@Repository
public interface GoodsDao {

    /**
     * 通过商品名字查找商品
     * @param name 商品名字
     * @return 商品列表
     */
    List<Goods> findGoodsByName(String name);
}

2. 前端代码

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>查找商品</title>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <form id="searchForm">
        商品名字：<input type="text" id="name" name="name"><br>
        <input type="button" value="查找" onclick="searchGoods()">
    </form>
    <table id="goodsTable" border="1">
        <thead>
            <tr>
                <th>商品编号</th>
                <th>商品名字</th>
                <th>商品价格</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        function searchGoods() {
            var name = $("#name").val();
            $.ajax({
                url: "/searchGoods",
                type: "GET",
                data: {
                    name: name
                },
                success: function(result) {
                    var tbody = $("#goodsTable tbody");
                    tbody.empty();
                    for (var i = 0; i < result.length; i++) {
                        var goods = result[i];
                        var tr = $("<tr></tr>");
                        tr.append($("<td></td>").text(goods.id));
                        tr.append($("<td></td>").text(goods.name));
                        tr.append($("<td></td>").text(goods.price));
                        tbody.append(tr);
                    }
                }
            });
        }
    </script>
</body>
</html>

说明：

通过表单输入商品名字，点击“查找”按钮，调用searchGoods()函数。
searchGoods()函数通过jQuery的ajax方法向后端发送GET请求，请求URL为“/searchGoods”，传入参数name。
后端通过@RequestParam注解获取参数name，调用GoodsService的findGoodsByName()方法查找商品。
GoodsService调用GoodsDao的findGoodsByName()方法，查找商品。
返回商品列表给前端，前端通过jQuery将商品列表显示在表格中。