前端:
1一个下拉html:此处省略
2下面是ajax
//动态选择产品:根据产品类型动态编辑产品 function changepType() { $.ajax({ async : false,url : "${ctx}/res/factoryAssembly/ajax2",type : "post",data : { pType : $("#pType").val() },dataType : "json",success : function(data) { $("#tbody").empty(); //清空上一次下拉的数据 jQuery.each(data,function(i,item){ //循环这个集合 alert(item.goodsName+","+item.num); var n = $('#tbody').append('<tr>' + '<td readonly="false"><input id="goodsName" value="'+item.goodsName +'">'+'<td></td>'+ '<td readonly="false"><input id="num" value="'+item.num+'">'+'</td></tr>'); }); } }); }
3后台:
@RequiresPermissions("res:factoryAssembly:view") @ResponseBody @RequestMapping(value = "ajax2") public String ajax2(String pType,HttpServletRequest request,HttpServletResponse response,Model model) throws Exception { List<Product> products = productService.selectByPtype(pType); return JsonMapper.getInstance().toJson(products);//把数据返回给success函数 }下拉选择数据发送给后台 -通过ajax-> 后台 -查询返回--> ajax --拼接html---> 数据展示成功