如何使用struts框架做下拉框（前端jsp+jquery+ajax）

今天做了个省市下拉框，在这里简单说一下我的思路。

前期准备：1.struts2框架包，连接池，数据库驱动包

2.有一个数据库，库中含有省份表，城市表，且省份城市需要有外键关联（网上可收到）

目的：通过单击省份，出现中国的所有省份，通过改变省份下拉框内容来显示出对应的城市。

思路：通过点击省份框，可以在数据库中查找所有省份并显示，通过点击省份框中的省，传送一个值（表中外键）到后台查询并返回显示。

注意：我将使用ajax两种方式传数据到后台，所以，在struts.xml配置文件中我定义一个返回数据类型为json。如图：

前台：第一种比较传统的ajax传送，比较繁琐：

<select id="provinceId" name="province">
    <option>选择省份</option>
</select>
<select id="cityId" name="city">
    <option>选择城市</option>
</select>

<script type="text/javascript">

  $("#provinceId").click(function(){
          var ajax=createAja();//createAja是自定义的创建ajax对象函数。
          var method="get";//传统ajax几个固定步骤：open,send,onreadystatechange
          var url="${pageContext.request.contextPath}/province";//发送到后台的路径
          ajax.open(method,url);
          ajax.send(null);
          ajax.onreadystatechange=function(){//ajax从前台发送到后台，监控后台对前台的响应
              if(ajax.readyState==4){
                  if(ajax.status==200){//只有后台响应是正确的，才显示省份
                      var resultJson=ajax.responseText;
                      var Json=eval("("+resultJson+")");//将后台的javajson格式转换成前台可以解析的json
                      for(var i=0;i<Json.list.length;i++){//该处list是后台返回的对应于后台传的。
                          var name=Json.list[i].proName;
                          var createOption=$("<option>"+name +"</option>").attr("id",Json.list[i].proID);
                          $("#provinceId").append(createOption);//使用jquery进行创建标签和拼接
                      }
                  }else{
                      alert("error");
                  }
              }
          }

  });
</script>

<script type="text/javascript">
    $("#provinceId").change(function(){//省份下拉框类容改变触发事件
      //清空城市下拉框
        $("#cityId option :not(:first)").remove();
    var provinceIndex=this.selectedIndex;//获取点击下拉框中的索引值
        var ajax=createAja();
        var method="post";
        var url="${pageContext.request.contextPath}/findCityByProvince";
        ajax.open(method,url);
        ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
        var content="bean.id="+provinceIndex;//bean后台创建的接受前台数据的对象
        ajax.send(content);
        ajax.onreadystatechange=function(){
            if(ajax.readyState==4){
                if(ajax.status==200){
                    var resultJson1=ajax.responseText;
                    var Json1=eval("("+resultJson1+")");
                    for(var i=0;i<Json1.listCity.length;i++){
                        var name=Json1.listCity[i].cityName;
                        var createOption1=$("<option>"+name +"</option>").attr("id",i);
                        $("#cityId").append(createOption1);//创建并拼接到城市下拉框中
                }
            }else{
                alert("error");
            }
        }
    }
    });
</script>
</body>

前台：第二种方式发送ajax数据到后台：

<select id="provinceId" name="province">
    <option>选择省份</option>
</select>
<select id="cityId" name="city">
    <option>选择城市</option>
</select>

<script type="text/javascript">
    //加载省份
    $("#provinceId").click(function(){//点击下拉框执行事件
           var url="${pageContext.request.contextPath}/province";
           var method="get";
           $.ajax({
              type:method,
              url:url,
              success:function(backdata){
                  for(var i=0;i<backdata.list.length;i++){
                      var name=backdata.list[i].proName;
                      var createOption=$("<option>"+name +"</option>").attr("id",backdata.list[i].proID);
                      $("#provinceId").append(createOption);
              }
           }
       });
    });
</script>
<script type="text/javascript">
    //加载城市
    $("#provinceId").change(function(){//下拉框内容改变执行事件
        //清空城市下拉框
        $("#cityId option :not(:first)").remove();
        var provinceId=this.selectedIndex;//选择的下标
        var url="${pageContext.request.contextPath}/findCity";//提交到后台地址
        var method="post";
        $.ajax({
            type:method,
            url:url,
            data:{"id":provinceId},//传送到后台的数据
            success:function(backdata){//后台执行成功返回的数据
                if(backdata!=null){
                for(var i=0;i<backdata.listCity.length;i++){
                    var name=backdata.listCity[i].cityName;
                    var createOption=$("<option>"+name +"</option>").attr("id",backdata.listCity[i].cityID);
                    $("#cityId").append(createOption);
                }
            }else{
                    alert("error")
                }
            }
        });
    });
</script>

后台：

entity层：

city，province实体类对应省份城市表

Bean实体类定义了接受前台数据实际就是

private String id;//接受省份id

getset方法。

action层：

public class Action extends ActionSupport {
    private Bean bean=new Bean();

    public Bean getBean() {
        return bean;
    }

    public void setBean(Bean bean) {
        this.bean = bean;
    }

    //在数据库中查找所有的省份
    private ProCService proCService=new ProCService();
    private List<Province> list;//返回省份存放处
    private List<City> listCity;//返回城市存放处

    public List<Province> getList() {

        return list;
    }

    public List<City> getListCity() {
        return listCity;
    }

    public String findProvince(){
       list=proCService.findProvince();
       return "success";
    }
    //对应provinceCity.JSP方式（传统）
    public String findCityByProvince(){
         String pid=bean.getId();
         listCity=proCService.findCityByProvince(pid);
         return "success";
    }
    //对应$.ajax方式请求
    public String findCity(){
      HttpServletRequest request= ServletActionContext.getRequest();
      String pid= request.getParameter("id");
        listCity=proCService.findCityByProvince(pid);
        return "success";
    }
}

大致差不多了，两种方式自己都尝试了，并且成功。

如何使用struts框架做下拉框（前端jsp+jquery+ajax）

猜你喜欢