zoukankan      html  css  js  c++  java
  • java 异步实现省市联动

    1.

    省份:<select id="provinceSelect"></select>
    城市:<select id="citySelect"></select>
    

     2.get,post请求都可

    	public String findProvinces(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		List<Province> list=dao.findProvinces();
    		String jsonString=JSONArray.fromObject(list).toString();
    		response.getWriter().write(jsonString);
    		return null;
    		
    	}
    	public String findCitysbyPid(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		String pId=request.getParameter("pId");
    		int provinceId=Integer.parseInt(pId);
    		List<City> list=dao.findCitysByPId(provinceId);
    		String jsonString=JSONArray.fromObject(list).toString();
    		response.getWriter().write(jsonString);
    		return null;
    	}
    

      3.

      function initProvinceSelect()
      {	 
    	  $.getJSON("<c:url value='ProvinceCityServlet'/>",{"method":"findProvinces"},function(data){
    //另一种遍历方式  还有each方式遍历 但在这里不常用   常用在遍历jquery元素集合上
    	for(var i = 0; i < data.length; i++){
    	  $("#provinceSelect").append("<option value='"+data[i].pid+"'>"+data[i].name+"</option>")
    	}
    		  bindCitySelectChange();//注意绑定事件的顺序  总是放在依赖控件加载完后面 因为是异步加载
    		  
    		  //初始化   很重要 一般是想不到的
    		  $("#provinceSelect").change();
    	  });
      }
    

      4.

      function bindCitySelectChange()
      {
    	  $("#provinceSelect").change(function(){
    		  var pId=$(this).val();//获取select选中项  很重要
    		  $("#citySelect").empty();
    		  //post get都行
    		  $.post("<c:url value='ProvinceCityServlet'/>",{"method":"findCitysbyPid","pId":pId},function(data){
    			  for(var key in data)
    			  {
    			  		$("#citySelect").append("<option>"+data[key].name+"</option>");
    			  }
    			  
    		  },"json");
    	  });
      }
    

      

  • 相关阅读:
    [Android] 开源框架 xUtils HttpUtils 代理设置 (Temporary Redirect错误)
    [Android] 开源框架 Volley 自定义 Request
    [算法]——汉诺塔的递归深度
    [libwww-perl]——POST方法的使用
    [Go语言]从Docker源码学习Go——Interfaces
    [Linux]可用于管道操作的命令
    npoi 导出word中写入特殊字符
    thinkphp框架中使用PHPExcel,按模板导出excel
    Access导出csv 内容添加双引号 vba
    导出excel和PDF小结 vba
  • 原文地址:https://www.cnblogs.com/lt123/p/7208926.html
Copyright © 2011-2022 走看看