1. 程式人生 > >根據下拉值,使用ajax動態獲取資料(在頁面顯示資料)

根據下拉值,使用ajax動態獲取資料(在頁面顯示資料)

前端:

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---> 資料展示成功