SSM后端 controller 向前端表格传递数据

版权声明：UU小七 ：转载请标注哦！^v^ https://blog.csdn.net/qq_36474549/article/details/84147191

前端JS：

$.ajax({
            url: "/generalManager/queryProductInfo", //后台url
            type: "POST",
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(product),
            success: function (data) {
                $("#btn_clear").click();//情空查询表单
                //成功，回调函数
                var json = JSON.stringify(data);//格式化Json数据
                var a = eval(json);//转json字符串
                var str = '';
                $('#product_tbody tr').empty();//表格去重
                $.each(a, function (index, item) {
                    if (0 == index) {
                        str += '<tr class="table-info">';
                    } else if (1 == index) {
                        str += '<tr class="table-warning">';
                    } else if (2 == index) {
                        str += '<tr class="table-danger">';
                    } else if (3 == index) {
                        str += '<tr class="table-success">';
                    } else if (4 == index) {
                        str += '<tr class="table-primary">';
                    } else {
                    }
                    str += '<td>' + (index + 1) + '</td>'
                        + '<td>' + item.categoryName + '</td>'
                        + '<td>' + item.productName + '</td>'
                        + '<td>' + item.supplierCompany + '</td>'
                        + '<td>' + item.productNum + '</td>'
                        + '<td>'
                        + '<input type="button" class="btn btn-gradient-info p-1"  value="详情"></input>'
                        + '<input type="button" class="btn btn-gradient-primary p-1 ml-2" value=\"修改\"></input>'
                        + '<input type="button" class="btn btn-gradient-danger p-1  ml-2" value="删除"></input>'
                        + '</td>'
                        + '</tr>';
                });
                $('#product_tbody').append(str);//注意放在遍历函数外面
            },
            error: function (er) {          //失败，回调函数
   
            }
        });

后台controller：

    @RequestMapping(value = "/queryProductInfo", method = RequestMethod.POST)
    @ResponseBody
    public void queryProductInfo(@RequestBody(required = false) Product product, HttpServletResponse response) throws UnsupportedEncodingException {
        SetEncoding.getResponse(response);//设置utf-8编码

//模糊查询
        if (product.getProductName().isEmpty()){product.setProductName(null);}
        ProductExample example = new ProductExample();
        ProductExample.Criteria criteria1 = example.createCriteria();

        if (product.getCategoryName() != "" && product.getCategoryName()!=null) {
            criteria1.andCategoryNameEqualTo(product.getCategoryName());
        }

        if (product.getSupplierCompany() !="" && product.getSupplierCompany()!=null){
            criteria1.andSupplierCompanyEqualTo(product.getSupplierCompany());
        }

        if (product.getProductName() != "" && product.getProductName()!=null){
            criteria1.andProductNameEqualTo(product.getProductName());
"+product.getProductName());
        }

        List<Product> list =  productService.selectByExample(example);
        System.out.println("SIZE------->  "+list.size());

        String productList = JSON.toJSONString(list);

        //  将后台信息传至前台
        try {
            PrintWriter out = response.getWriter();

            out.println(productList);
            //   System.out.println(categoryList);
            out.flush();
            out.close();
        } catch (
                IOException e) {
            e.printStackTrace();
        }

jsp页面：

	<div class="card">
		<div class="card-body">

			<p class="card-description">
				<code>商品信息</code>
			</p>
			<table class="table table-bordered" style="text-align: center;">
				<thead>
					<tr>
						<th>
							编号
						</th>
						<th>
							类别
						</th>
						<th>
							商品名
						</th>

						<th>
							供应商
						</th>
						<th>
							商品数量
						</th>
						<th>
							操作
						</th>
					</tr>
				</thead>
				<tbody id="product_tbody" style="text-align: center;">
				</tbody>
			</table>
		</div>
	</div>

效果：