easyui +ajax异步请求

因业务需求，当选择不同的产品时对应的其他下拉框值要级联显示来控制使用对应的产品。

环境：前台 easyui 后台ssm
当选择产品这个下拉框时，触发ajax异步的大致步骤，上code：

//产品下拉的combobox

<input class="easyui-combobox" id="plancode"/>

//受到产品下拉的其他四个下拉框，他们的操作是一样的。这里我举出一个栗子。

<input class="easyui-combobox" id="price"/>

1.首先是绑定事件：当选中产品下拉中的某个值触发事件

$("#plancode").combobox({onSelect:function(record){//这个record是传入选中项的key和value值,其结构示例：“{"id":"lt01","name":"宇宙辣条"}”,这里id为真实值，name为显示值。我们获取对应的产品码var plancode=record.id;}})

2.在出发事件中添加异步请求

$("#plancode").combobox({onSelect:function(record){    var plancode=record.id;    //异步请求    $.ajax({        url:'${rootPath}/foodSale/getPrice',        type:"POST",        data:{"plancode":plancode},        success:function(data){            //data为后台返回值。我们这里后台返回的是map类型。map.put("latiao":3.5);所以到前台取值方式：            var  price=data.latiao;        }    })}})

3.对于一些初始化赋值设置的知识点

//将下拉框设置为不可选，不可编辑的状态

$(#"latiao").combo('readonly');

//将下拉框恢复可编辑可下拉状态

$(#"latiao").combo('readonly'，false);

//为下拉框的值赋值的几种

$(#"latiao").combobox({    valueField:'id',    textField:'name',    data:[{id:"latiao",name:"辣条"},{id:"xiaolayu",name:"小辣鱼"},{id:"paomian",name:"泡面"}]})$(#"latiao").combobox('setValue','');$(#"latiao").combobox('setValue',latiao);//latiao 为参数

4.ajax后台返回的参数对应的controller层代码

@RequestMapping("/getPrice")@ResponseBodypublic Map<String,Object> getPrice(HttpServletRequest request){Map<String,Object> map=new HashMap<String,Object>();//Dto是对hashmap的封装。相当于mapDto dto=getParamAsDto(request);map.put("price",查表获得的价格);map.put("shuliang",对应的产品数量);return map;}//然后返回到前台的数据格式由springmvc转成这样data={"price":"3.5","shuliang","200"},在页面js中可以直接点点点出来结果。