java ajax jQuery 根据下拉框 选择商品 显示商品信息 一个简单的例子

1：第一步在jsp 把ajax写好
[因为我的select里面写不进去onchange事件 所以就用jQuery给select加了一个onchange事件$("#goodsId").attr(“onchange”)]

$("#goodsId").attr("onchange")
			$("#goodsId").change(function () {
				var goodsId = $(this).val();
				$.ajax({
					async:false,
					type: "POST",
					dataType: "json",
					url: "${ctx}/call/callorder/callOrder/findGoods",
					data:{"goodsId":goodsId},
					success:function (dataValue) {
						console.log(dataValue)//后台查到的数据
						console.log(dataValue.sku)
						console.log(dataValue.goodsPrice)
						//把值赋给相应的input中
						$("#goodsPrice").val(dataValue.goodsPrice)
						$("#sku").val(dataValue.sku)
					}
				})
			})

2：在控制层接收ajax传过来的goodsId 查询所要的结果

 @ResponseBody
	@RequestMapping(value = "findGoods")
	public Map<String, Object> findGoods(CallOrder callOrder) {

		Map<String, Object> mapDataMessage = new HashMap<String, Object>();
		CallGoods callGoods = callGoodsService.findGoods(callOrder.getGoodsId());
		if("".equals(callOrder.getGoodsId())||callOrder.getGoodsId()==null){
			mapDataMessage.put("sku",0);
			mapDataMessage.put("goodsPrice",0);
		}else {
			mapDataMessage.put("sku",callGoods.getGoodsSku());
			mapDataMessage.put("goodsPrice",callGoods.getGoodsPrice());
		}

		return mapDataMessage;
	}

3：打断点 测试一下请求是否成功

4：在浏览器上 F12 查看返回来的结果

5：{goodsPrice: “20”, sku: “128G 全网通 4G 白色”} 成功了
然后在回调函数中 对象点属性获取到值 然后用jQuery把获取到的值赋给相应的input

6：效果GIF