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