当前位置：Gxlcms > 数据库问题 > 份-城市，基于jQuery的AJAX二级联动,用Struts2整合AJAX【非数据库版】

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

时间：2021-07-01 10:21:17 帮助过：10人阅读

loaderman.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 { 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>

标签：extend 基于城市下拉 dHash cti util ring package

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

人气教程排行