份-城市，基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】 

package loaderman.provincecity;

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

/**
 * 控制器*/
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 {
        System.out.println("进来了");
        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;
    }
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

   <package name="loaderman" extends="json-default" namespace="/">
   
           <!-- 根据省份查询城市 -->
           <action 
               name="findCityByProvinceRequest"
               class="loaderman.provincecity.ProvinceCityAction"
               method="findCityByProvince">
        
            <result name="success" type="json"/>
            
           </action>
       
   </package>

</struts>
<%@ 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}/findCityByProvinceRequest?time="+new Date().getTime(),
                    data    : {"province":province},
                    success : function(backDate,textStatus,ajax){
                                //alert(backDate!=null?"收到":"为收到");    
                                //alert(ajax.responseText);
                                //解析json文本
                                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>

 

posted on 2018-12-03 13:57  LoaderMan  阅读(198)  评论(0)  编辑  收藏  举报

导航