ajax 省市级联项目中的实现

使用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" onchange="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与后台交互，当省份发生改变解发onchange="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不行，所以自己拼写的。现在也不知道为什么，如有知道请赐教