呼叫ajax返回List,對問題的一個記錄
阿新 • • 發佈:2019-01-06
這兩天,做小專案碰到了一個問題,流程是這樣的,一個下拉框控制型別,另一個下拉框根據前一個下拉框的內容變化而變化,通俗的說就是級聯操作。前一個下拉框影響另一個下拉框的內容。 而在這裡我主要遇到的問題是返回的List和我原來用到的完全不一樣。這裡直接看例項:
<!-- 機構型別 --> <div class="form-group"> <label class="col-md-3 control-label">借出使用者型別:</label> <div class="col-md-4"> <select name="lend.stationType" id="stationType" class="select2_category form-control" data-placeholder="Choose a Category" tabindex="1"> <option value="">--請選擇--</option> <option value="1" select="selected" >員工</option> <option value="2">監測站</option> </select> </div> </div> <!-- 機構 --> <div class="form-group"> <label class="col-md-3 control-label"><font color="red">*</font>機構:</label> <div class="col-md-4"> <select name="lend.station" id="station" class="select2_category form-control" data-placeholder="Choose a Category" tabindex="1"> <option value="">---請選擇--- </option> <c:forEach var="comList" items="${companyList }"> <option value="${comList.YHBH }">${comList.YHMC }</option> </c:forEach> </select> </div> </div>
這裡剛進入這個頁面的時候,我是直接顯示員工型別和員工的姓名,如果改變型別那麼下一個下拉框的內容也隨之變化,通過ajax返回一個關於機構的集合。
下面是我寫的js:
$("#stationType").change(function(){ var types = $("#stationType").val(); if(types != ""){ $.ajax({ type : "POST", url : "product_changeStationType.action", data : {stationType:types, t:Math.random()}, success:function(res){ var dataObj = JSON.parse(res); //var resd = eval(res["list"]); if(types == "1"){ // 公司 var opts = '<option value="" >---請選擇---</option>'; for(var i = 0; i <dataObj.length; i++){ opts += '<option value="'+dataObj[i].YHBH+'">'+dataObj[i].YHMC+'</option>'; } $("#station").html(opts); } else{ if(types == "2"){ var opts = '<option value="" >---請選擇---</option>'; for(var i = 0; i <dataObj.length; i++){ opts += '<option value="'+dataObj[i].BMBM+'">'+dataObj[i].BMMC+'</option>'; } $("#station").html(opts); } else{ alert("資料型別錯誤,請重新進入此頁面"); } } }, error:function(){ alert("返回的資料型別不匹配"); } }); } })
後臺:
public void changeStationType(){ HttpServletRequest request = ServletActionContext.getRequest(); HttpSession session= request.getSession(); int stationType = Integer.parseInt(request.getParameter("stationType").toString()); HashMap map = new HashMap(); HttpServletResponse response = ServletActionContext.getResponse(); if(stationType == 1){ StringBuffer companySql = new StringBuffer("select t.yhbh,t.yhmc from base_yh t where t.bm='420000000001' and t.zt='1' "); companyList = (List) baseDao.loadBySql(companySql.toString(), null); this.printToJson1(companyList); } else{ if(stationType == 2){ StringBuffer sybmSql = new StringBuffer("select t.bmbm,t.bmmc from ckgl_sybm t "); sybmList = (List) baseDao.loadBySql(sybmSql.toString(), null); this.printToJson1(sybmList); } else{ //輸出型別出錯 this.printToJson(""); } } }
public void printToJson1(List json){
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
try {
JSONArray jsons = JSONArray.fromObject(json);
response.getWriter().print(jsons);
} catch (IOException e) {
}
}
這裡是在後臺生成一個list,再轉為JsonArray陣列形式傳給前臺,老實說每次這樣關於後臺傳前臺我用過多種辦法,但每次寫完都不記得了,這裡做一個記錄,避免以後忘記了。
通過ajax,後臺傳給前臺一個List 就用這種方式。