使用ajax實現省市聯動，json做為數據的異常傳輸。項目S2SH

• 加入json所依賴的jar包?

?? ? ? ? ? ?

• ??編寫查出所有的省的方法：

?

/**** 到新增展會頁面 ?*/

public String toAdd() {

ActionContext context = ActionContext.getContext();

HttpServletRequest request = (HttpServletRequest) context.get(ServletActionContext.HTTP_REQUEST);

request.setAttribute("provinces", provinceService.findProvinces());// 查出所有的方法放到request中

return "toAdd";

}

• 在頁面中把所有的省都取出來

??<tr>

?? ? ? ?<td class="title" width="150px;">舉辦省市</td>

?<td class="sep1" style="text-align: left;">

?? ? <select ?class="select" id="provinceId" οnchange="changeProvince()" >

?? ? ?? ?<option value="1">請選擇</option>

? ? ? <c:forEach items="${provinces}" var="province">

? ? ? ? <option value="${province.provinceId }">${province.provinceCnName}</option>

? ? ? </c:forEach>

?? ? ? ?</select>

?? ? ? ? <select name="cityName" class="select" id="cityId">

? ? ? ? <option value="1">請選擇</option>

?? ? ? ?</select>

?? ? </td>

?? ?</tr>

• 編寫ajax與后臺交互，當省份發生改變解發οnchange="changeProvince()"

?? ? ??<script type="text/javascript">

//改變省份

function changeProvince(){

?? ? ? ?var provinceId = document.getElementById("provinceId");

?? ? ? ?sendAjaxRequest("actions/exhibitionAction!changeCity","provinceId="+provinceId.value,myback); //此方法己做封裝可以到ajax學習去找

?? ? ? ?};

?? ? function myback()

?? ? {

?? ? clearList();

?if (xhr.readyState == 4)?

?{ // 響應已完成

? ?if (xhr.status == 200)

? ? {// 成功處理

var city = document.getElementById("cityId");

var city2 = ?JSON.parse(xhr.responseText);

? ? for(var i in city2)

? ? {? for(var j in city2[i])? {

? ? ?option=document.createElement("option");

? ? ?var cityCnName=document.createTextNode(city2[i][j].cityCnName);

? ? ?option.appendChild(cityCnName);

? ? ?option.setAttribute("value", city2[i][j].cityId);

? ? ?city.appendChild(option);

? ? }?

? ? }

}

} ?

}

?? ? function clearList()

?? ? {

?? ? var departmentName=document.getElementById("cityId");

?? ? while(departmentName.childNodes.length>0){

?? ? ? ? ? departmentName.removeChild(departmentName.childNodes[0]);

?? ? ? ? }

?? ? }

??</script>

• 編寫changeCity方法在后臺

?? ? ??/**** 異步更改城市*/

public String changeCity() {

try {

ActionContext context = ActionContext.getContext();

HttpServletRequest request = (HttpServletRequest) context.get(ServletActionContext.HTTP_REQUEST);

HttpServletResponse response = (HttpServletResponse) context.get(ServletActionContext.HTTP_RESPONSE);

String cProvinceId = request.getParameter("provinceId");

int provinceId = 0;

List<City> listCitys = new ArrayList<City>();

if (cProvinceId != null) {

provinceId = Integer.valueOf(cProvinceId);

listCitys = cityService.findCitysByProvinceId(provinceId);

StringBuilder sb = new StringBuilder();

sb.append("[[");

int i = 1;

for (City city : listCitys) {

sb.append("{");

sb.append("/"cityCnName/":/"").append(city.getCityCnName())

.append("/",");

sb.append("/"cityId/":").append(city.getCityId());

sb.append("}");

if (i != listCitys.size()) {

sb.append(",");

}

i++;

}

sb.append("]]");

System.out.println(sb.toString());

response.setContentType("text/html;charset=utf-8");

response.getWriter().print(sb.toString());

response.getWriter().flush();

}

} catch (Exception e) {

e.printStackTrace();

}

return null;

}

?

效果圖：

?

?

注：后臺的是自己拼寫的json格式，[[{"cityCnName":"北京","cityId":1},{"cityCnName":"天津","cityId":2}]]

我放一個JsonArray不行，所以自己拼寫的。現在也不知道為什么，如有知道請賜教

?

轉載于:https://www.cnblogs.com/java20130726/archive/2010/12/31/3218400.html

總結

以上是生活随笔為你收集整理的ajax 省市级联项目中的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。