`
2277259257
  • 浏览: 498322 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

jsp-----页面下拉框两级联动( ajax版 )

 
阅读更多

前台：---------------------------------------------------------------------------------------

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
<script type="text/javascript">
   function getXmlHttpRequest(){
       var xhr = null;
       if((typeof XMLHttpRequest)!='undefined'){
           xhr = new XMLHttpRequest();
       }else {
           xhr = new ActiveXObject('Microsoft.XMLHttp');
       }
       return xhr;
   }
   function change(v1){
       var xhr = getXmlHttpRequest();
       xhr.open('post','city.do',true);
       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       xhr.onreadystatechange=function(){
          //服务器返回 yy,岳阳;cs,长沙;hh,怀化
          if(xhr.readyState == 4){
              var txt = xhr.responseText;
              var arr = txt.split(';');
              $('s2').innerHTML = '';

              for(i=0;i<arr.length;i++){
                  var arr1 = arr[i];
                  var arr2 = arr1.split(',');
                  var op = new Option(arr2[1],arr2[0]);
                  $('s2').options[i] = op;
              }
           }
         };
         xhr.send('name=' + v1);
  }
</script>
</head>
<body style="font-size:30px;">
         <select id="s1" style="width:120px;" onchange="change(this.value);">
              <option value="hn">湖南</option>
              <option value="bj">北京</option>
         </select>
         <select id="s2" style="width:120px;"> </select>
</body>
</html>

 

后端：------------------------------------------------------------------------------------------------------------------

public class ActionServlet extends HttpServlet {
        public void service(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {

              String uri = request.getRequestURI();
              String path = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
              response.setContentType("text/html;charset=utf-8");
              PrintWriter out = response.getWriter();
              if(path.equals("/city")){
                 String name = request.getParameter("name");
                 if(name.equals("hn")){
                    out.println("yy,岳阳;hh,怀化;cs,长沙"); -----手工组装下拉项数据格式
                 }else if(name.equals("bj")){
                   out.println("cy,朝阳;hd,海淀;dc,东城;xc,西城");-----手工组装下拉项数据格式
                }
            }
            out.close();
       }
}

 

 

 

 

分享到：
| web开发总结----数据流程
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics