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不行，所以自己拼写的。现在也不知道为什么，如有知道请赐教
