select勾选后利用Ajax获取后端JSON数据并加载到当前另外一个Div中

在做前后端交互的时候，经常会需要用到，将用户勾选的数据，无刷新显示到一个专门区域（类似直接回显的购物车功能），然后给客户提交。这个时候就需要用到AJAX来进行前后端通讯

JavaScript代码： 

function onChanges() {
 
//每次获取数据前先清空div
$("#showList").empty();
//获取select选中的值
var housecode = $("#searchHousecode").val();
//进行判断 不为空进行ajax请求 否则提示没有输入
if (housecode != null && housecode.trim() != "") {
$.ajax({
    type : "post",
    data:"housecode="+housecode,
    url : "HouseRepairController_listPage",
    success : function(data) {
    //把返回的数据使用each进行遍历读取
    $.each(data, function(i,n){
    //获得div的id并把需要显示的值追加到div中
    $("#showList").append("<div class='repaitList'><ul><li><abbr>"+n.name+
    "</abbr><span class='borderRadius5 repaitListSpan1'>"
    +n.STATUS+"</span></li><li class='oneEllipis'>"+n.factory_name+
    "</li></ul><ul><li class='borderRadius300 btnOKColor' id='sure' name="
    +n.goods_code+" onclick='RepairEdit(this)'>报修</li></ul></div>")
    })}  
    });    
} else {
alert("房间号不为空 !");
}       
}

controller代码：

@RequestMapping(value = "/HouseRepairController_listPage")
@ResponseBody
public Object listPage() throws Exception {
PageData pd = new PageData();
pd = this.getPageData();
IUser user = getApUser();
String id = user.getId();
pd.put("id", id);
pd.get("housecode");
List<PageData> li = FHouseRepair.findGoodInfo(pd);
if (null != li && li.size() > 0) {
pd.put("housecode", li.get(0).getString("house_code"));
}
JSONArray array = JSONArray.fromObject(li);
return array;
}

HTML代码：

<ul style="border: 0rem; width: 100%">
<span style="font-size: 0.8rem;">房间号：</span>
<select style="width: 68%; height: 1.6rem;"
onchange="onChanges();" id="searchHousecode">
<option value="">请选择</option>
<c:if test="${not empty housePd}">
<c:forEach items="${housePd}" var="ls">
<option value="${ls.room_code}">${ls.houseName}</option>
</c:forEach>
</c:if>
<c:if test="${empty housePd}">
<option value="">获取中...</option>
</c:if>
</select>
</ul>
 
<div id="showList"></div>

这个就是实现前后端通讯，并实时回显的功能了，大家可以尝试一下