如何使用Ajax动态请求后台数据制作二级联动下拉框

如何使用Ajax动态请求后台数据制作二级联动下拉框

首先，要想制作一个两个下拉框是可以有联动的，两个的数据就需要有外键连接，这里我以我的两个表为例，一个是汽车品牌表，一个是汽车车型表。
1.汽车品牌表：

2.汽车车型表:

我们在这两个表可以看出，不同的汽车车型都属于某一个车型品牌，而一个汽车品牌拥有多个车型信息，那我们的二级联动就是选择不同的汽车品牌即可弹出下拉框有相对应的汽车车型。

**首先我们先创建出三个下拉框，代码和效果图如下:**

前端代码:

<div class="form-group">
          <label for="inputCarType" class="col-sm-2 control-label">车型</label>
           <div class="col-sm-2">   
                <select id="nationality" name="nationality"  onchange="show_brand(this.value)" class="form-control" >
									<option value="">请先选择国别</option>
									<option value="德国">德国</option>
									<option value="日本">日本</option>
									<option value="中国">中国</option>
				</select>
            </div>
            <div class="col-sm-2">   
                <select id="car_brand" class="form-control"  name="car_brand" onchange="show_car_type(this.value)" >                  
                </select>
            </div>
            <div class="col-sm-2">   
                <select id="car_type" class="form-control">                 
                </select>
            </div>
        </div>

效果图:

前端代码和效果图如上，但是仅仅只是样式而已，那我们如何从后台接收数据并联动地返回到相对应的下拉框里呢？我们使用的是 onchange 触发事件，当鼠标点击拉动下拉框时，就会触发的某个事件，而这个事件就是Ajax请求，然后从回调函数中接收数据
代码如下:

<script type="text/javascript">
	function show_brand(value) {
		var nationality = value;
				
	 $.ajax({
        type:'post',
        url:"${path}/brand.do?action=js_select_brand",
        dataType:"json",
        data:{
        nationality:nationality
        },      
        success:function(data){
          $("#car_brand").empty();
          $("#car_brand").append("<option value=''>请选择车型</option>");
          for(var i=0;i<data.length;i++){
           $("#car_brand").append('<option value='+data[i].name+'>'+data[i].name+'</option>');
           
       }
      }
   });			
}
function show_car_type(value){
var car_brand=value;
	 $.ajax({
        type:'post',
        url:"${path}/car_type.do?action=js_get_all",
        dataType:"json",
        data:{
        car_brand:car_brand
        },      
        success:function(data){
          $("#car_type").empty();
          $("#car_type").append("<option value=''>请选择车型</option>");
          for(var i=0;i<data.length;i++){
           $("#car_type").append('<option value='+data[i].name+'>'+data[i].name+'</option>');          
       }
      }
   });	
}
</script>

在两个下拉框的onchange事件中触发一次ajax，每次都把当前值传到控制器里，也就是servlet中，再由servlet执行相对应的SQL语句，从而获取回调函数，响应到下拉框中。
控制器方法1代码如下:

	private void js_select_brand(HttpServletRequest request, HttpServletResponse response) throws IOException {
		String nationality=request.getParameter("nationality");
		ArrayList<Brand> list=brand_service.select(nationality);
		JSONArray json = JSONArray.fromObject(list);
		response.getWriter().write(json.toString());		
		
	}

以及使用的持久层代码:

@Override
	public ArrayList<Brand> select(String nationality) {
		//查询所有信息
		DB_conn.init();
		ArrayList<Brand> list = new ArrayList<Brand>();
		String sql="SELECT * FROM brand where nationality='"+nationality+"'";
		ResultSet rs=DB_conn.selectSql(sql);
		try {
			while(rs.next()){
				Brand brand=new Brand();
				brand.setB_id(rs.getInt("b_id"));
				brand.setT_id(rs.getInt("t_id"));
				brand.setC_id(rs.getInt("c_id"));
				brand.setName(rs.getString("name"));
				brand.setNationality(rs.getString("nationality"));									
				list.add(brand);
			}
			return list;
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}

控制器方法2代码如下:

	private void js_get_all(HttpServletRequest request, HttpServletResponse response) throws IOException {
		String car_brand=request.getParameter("car_brand");
		ArrayList<Car_Type> list=car_type_service.select_all(car_brand);
		JSONArray json = JSONArray.fromObject(list);
		response.getWriter().write(json.toString());
		
	}

持久层代码如下:

@Override
	public ArrayList<Car_Type> select_all(String car_brand) {
		//查询所有信息
		DB_conn.init();
		ArrayList<Car_Type> list = new ArrayList<Car_Type>();
		String sql="SELECT * FROM car_type where c_brand='"+car_brand+"'";
		ResultSet rs=DB_conn.selectSql(sql);
		try {
			while(rs.next()){
	        	Car_Type car_type=new Car_Type();
				car_type.setT_id(rs.getInt("t_id"));
				car_type.setB_id(rs.getInt("b_id"));
				car_type.setBrand(rs.getString("c_brand"));
				car_type.setName(rs.getString("name"));								
				list.add(car_type);
			}
			return list;
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}

选择不同的国别就会请求相对应国别的品牌，再选择相对应的品牌，就会请求响应对应的车型信息。
希望能对你有所帮助！谢谢~