根據下拉值,使用ajax動態獲取資料(在頁面顯示資料)
阿新 • • 發佈:2019-01-10
前端:
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"下拉選擇資料傳送給後臺 -通過ajax-> 後臺 -查詢返回--> ajax --拼接html---> 資料展示成功) 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函式 }