如何用ajax 实现点击下拉框传值到后台并返回页面渲染
本人在实现的功能是
通过点击仓库按钮查询出所有的仓库,通过仓库查询出相应的商品,并在页面渲染
HTML 页面:
<td class="title"><span >仓库</span></td>
<td colspan="6">
<select class="form-control inpu" id="kufang" name="storageRoomId">
<option>请选择库房</option>
<#list storageroomList as storageroom>
<option value="${storageroom.storageRoomId}">${storageroom.storageRoomName}</option>
</#list>
</select>
</td>
<td colspan="14">
<table class="table inside" id="tabletest">
<thead>
<tr class="first" >
<th colspan="2">序号</th>
<th colspan="2">商品名称</th>
<th colspan="2">商品单位</th>
<th colspan="2">商品类型</th>
<th colspan="2">商品型号</th>
<th colspan="2">仓储数量</th>
<th colspan="2">盘点数量</th>
<th colspan="2">盈亏数量</th>
</tr>
</thead>
</table>
js 代码:
//给库房添加了一个事件,获取点击后的值
$("#kufang").change(function(e){
// debugger
//获取下拉框里的值
console.log($("#kufang").val());
var zhi=$("#kufang").val();
//使用ajax ,post 方式,相当于URL:goodstgkuangfang,kfm:zhi 参数
$.post("goodstgkuangfang",{kfm:zhi},function(data){
debugger
$("#tabletest tr:gt(0)").remove();
// alert("获取到的map"+data)
data1= data["goodslist"]
data2= data["goodsUnitList"]
data3= data["goodsTypeList"]
for(i in data1) //data.data指的是数组,数组里是8个对象,i为数组的索引
{
for(x in data2){
if(data2[x].goodsUnitId==data1[i].goodsUnitId){
var goodsUnitName = data2[x].goodsUnitName;
}
}
for(y in data3){
if(data3[y].goodsTypeId==data1[i].goodsTypeId){
var goodsTypeName = data3[y].goodsTypeName;
}
}
// $("#tabletest tr:not(:first)").empty();
var tr;
var iii=parseInt(i)
// alert("运算类型为"+typeof(i) ) ;
var ii= parseInt(i)+1
tr='<td colspan="2">'+ii+'</td>'+'' +
'<td colspan="2"><input type="text" style=border:none;text-align:center readonly="readonly" name="details['+i+'].goodsName" value='+data1[i].goodsName+'></td>'+'' +
'<td colspan="2"><input type="text" style=border:none;text-align:center readonly="readonly" name="details['+i+'].sysGoodsUnit" value='+goodsUnitName+'></td>'+'' +
'<td colspan="2"><input type="text" style=border:none;text-align:center readonly="readonly" name="details['+i+'].goodsType" value='+goodsTypeName+'></td>'+
'<td colspan="2"><input type="text" style=border:none;text-align:center readonly="readonly" name="details['+i+'].goodsSpecificationModel" value='+data1[i].goodsSpecificationModel+'></td>'+'' +
'<td colspan="2"><input type="text" style=border:none;text-align:center readonly="readonly" name="details['+i+'].goodsStock" value='+data1[i].goodsStock+'></td>'+'' +
'<td colspan="2"><input type="text" style=border:none;text-align:center name="details['+i+'].physicalInventory"></td>'+'' +
'<td colspan="2"><input type="text" style=border:none;text-align:center name="details['+i+'].profitLossNum"></td>'
$("#tabletest").append('<tr>'+tr+'</tr>')
}
})
});
后台代码:
@RequestMapping("goodstgkuangfang")
public @ResponseBody Map<String,List> selectgoodstgkuangfang(
@RequestParam("kfm")Long kfm){
//通过仓库名称的id查询商品
List<SysGoods> goodslist = sysGoodsDao.findSysGoodsByStorageRoomIdAndGoodsStatus(kfm, "0");
//查询所有的商品类型
List<SysGoodsUnit> goodsUnitList = sysGoodsUnitDao.findAllByGoodsUnitStatus("0");
//查询所欲的商品单位
List<GoodsType> goodsTypeList = goodsTypeDao.findAllByGoodsTypeStatus("0");
Map<String,List> map =new HashMap<String,List>();
map.put("goodslist",goodslist);
map.put("goodsUnitList",goodsUnitList);
map.put("goodsTypeList",goodsTypeList);
System.out.println(map);
// String s = JSONObject.toJSONString(map);
return map;
}
//实现后的效果