jquery Ajax的使用-优快云博客

本文介绍了一个基于Struts2和jQuery AJAX实现的省份-城市二级联动示例。通过一个简单的JavaEE项目展示了如何根据用户选择的省份动态加载对应的城市列表。

城市的联动

package cn.itcast.javaee.js.provincecity;

import java.io.IOException;
import java.util.LinkedHashSet;
import java.util.Set;
import com.opensymphony.xwork2.ActionSupport;

/**
 * 控制器 
 * @author AdminTC
 */
public class ProvinceCityAction extends ActionSupport{
    private String province;
    public void setProvince(String province) {
        this.province = province;
        //System.out.println("注入" + province);
    }
    //根据省份查询城市
    public String findCityByProvince() throws Exception {
        setCity = new LinkedHashSet<String>();
        if("湖南".equals(province)){
            setCity.add("长沙");
            setCity.add("株洲");
        }else if("广东".equals(province)){
            setCity.add("广州");
            setCity.add("中山");
            setCity.add("佛山");
        }
        return SUCCESS;
    }
    private Set<String> setCity;
    public Set<String> getSetCity() {
        return setCity;
    }
}

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>省份-城市，基于jQuery的AJAX二级联动</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  <body>
    
    <select id="province">
        <option>选择省份</option>
        <option>湖南</option>
        <option>广东</option>
    </select>
    
    <select id="city">
        <option>选择城市</option>
    </select>

    
    <!-- 省份->城市 -->    
    <script type="text/javascript">
        //定位省份下拉框，同时添时内容改变事件
        $("#province").change( function(){
            //清空原城市下拉框中的内容，除第一项外
            $("#city option:gt(0)").remove();
            //获取选中的省份
            var province = $("#province option:selected").text();
            //如果选中的不是"选择省份"
            if("选择省份"!=province){
                $.ajax( {
                    type    : "POST",
                    url     : "${pageContext.request.contextPath}/struts2/findCityByProvinceRequest?time="+new Date().getTime(),
                    data    : {"province":province},
                    success : function(backDate,textStatus,ajax){
                                //alert(backDate!=null?"收到":"为收到");    
                                //alert(ajax.responseText);
                                //解析json文本
                                /*backDate.setCity是public Set<String> getSetCity() {
                                                    return setCity;
                                                    }
                                返回的是集合
                                */
                                var array = backDate.setCity;
                                  var size = array.length;
                                  for(var i=0;i<size;i++){
                                      var city = array[i];
                                      var $option = $("<option>"+city+"</option>");
                                      $("#city").append($option);
                                  }
                              }
                } );
            }
        } );
    </script>

  </body>
</html>