Ajax异步刷新省市级联

省市级联在web前端用户注册使用非常广泛。Ajax异步刷新省市级联。如图：选择不同的区，自动加载相应的街。

    <TD class=field>位　　置：</TD>
    <TD>区：
        <SELECT class=text name="district_id"  id="district_id">
            <option selected value="请选择">请选择</option>
            <c:forEach var="district" items="${requestScope.district}">
                <OPTION value="${district.id }">${district.district_name }</OPTION>
            </c:forEach>
        </SELECT> 
        <span id="street_span">
        街：
        <SELECT class=text name=street_id id='street_id'>
        <c:forEach var='street' items='${sessionScope.street}'>
<OPTION value='${street.street_name}'>${street.street_name}</OPTION></c:forEach>
            </SELECT> </span>
        </TD>
    </TR>

  //核心代码（一定要导入jquery-1.8.3.js架包）
<script type="text/javascript">
      //声明全局对象
       var xmlhttp;
       
       //创建XMLHttpRequest对象
       function createXMLHttpRequest(){
           
           if(window.XMLHttpRequest){
               xmlhttp=new XMLHttpRequest();
           }else if(window.ActiveObject){
               xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
           }
           
       }
       function doAjax(url){
            //初始化XMLHttpRequest
            createXMLHttpRequest();
            //判断对象是否初始化成功
            if(xmlhttp!=null){//说明初始化正常
                //请求服务器
                xmlhttp.open("post",url,true);
                //指定回调函数
                xmlhttp.onreadystatechange=successresponse;
                xmlhttp.send(null);
            }
    };
       //指定回调函数
       function successresponse(){
           //判定响应状态
           if(xmlhttp.readyState==4){
               if(xmlhttp.status==200){
                   chuli(xmlhttp.responseText);
               }
           }
       };
      //初始化加载jQuery
      window.onload=function(){
          var count=$("#district_id option").length;
          for(var i=0;i<count;i++){      
                 if( $("#district_id ").get(0).options[i].selected == true && $("#district_id ").get(0).options[i].value=="请选择"){
                     $("#street_span").addClass("removeStreet_span");
                 };   
          };
      };
          /*ID选择器*/
    $(document).ready(function() {
        $("#district_id").change(function(){
          var count=$("#district_id option").length;
          for(var i=0;i<count;i++){      
                 if( $("#district_id ").get(0).options[i].selected == true && $("#district_id ").get(0).options[i].value=="请选择"){
                     alert("请选择区");
                     $("#street_span").addClass("removeStreet_span");
                 }else if($("#district_id ").get(0).options[i].selected == true){
                     var district_value=$("#district_id").get(0).options[i].value;
                     $("#street_span").removeClass("removeStreet_span");
                     //请求异步刷新：以请求地址作为参数传递
                    doAjax("../SelectStreetServlet?id="+district_value);
                 };   
          };
        });
    });
      
      
    function chuli(data){
        var json = eval("("+data+")");
        var txt = "";
        for(var i = 0;i<json.jie.length;i++){
            txt = txt+"<option value="+json.jie[i].name+">"+json.jie[i].name+"</option>";
        }
        $("#street_id").html(txt);
   };    
  </script>

相应的com.msl.Servlet页面

package com.msl.Servlet;

import java.io.IOException;
import java.io.Writer;
import java.util.Iterator;
import java.util.Set;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.hibernate.Session;

import com.msl.HibernateUtil.HibernateUtil;
import com.msl.entity.District;
import com.msl.entity.Street;

public class SelectStreetServlet extends HttpServlet {

    /**
     * 
     */
    private static final long serialVersionUID = -3989943574735454346L;

    /**
     * Destruction of the servlet. <br>
     */
    public void destroy() {
        System.out.println("servlet");
    }

    /**
     * The doGet method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to get.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request,response);
//        response.setContentType("text/html");
//        PrintWriter out = response.getWriter();
//        out.println("<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">");
//        out.println("<HTML>");
//        out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
//        out.println("  <BODY>");
//        out.print("    This is ");
//        out.print(this.getClass());
//        out.println(", using the GET method");
//        out.println("  </BODY>");
//        out.println("</HTML>");
//        out.flush();
//        out.close();
    }

    /**
     * The doPost method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to post.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
//        request.setCharacterEncoding("UTF-8");
//        int id=Integer.parseInt(request.getParameter("id"));
//        
//        StreetBiz sz=new StreetBizImpl();
//        List<Street> street=sz.selectStreet(id);
//        int status=0;
//        if(street.size()>0){
//            status=1;
//        }
//        request.getSession().setAttribute("street", street);
//        response.setContentType("text/html");
//        response.setCharacterEncoding("UTF-8");
//        PrintWriter out = response.getWriter();
//        out.println(status);
//        out.flush();
//        out.close();
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        int id=Integer.parseInt(request.getParameter("id"));
        Session session=HibernateUtil.getSession();
        District dis=(District) session.get(District.class, id);
        Set<Street> st=dis.getSet();
        Iterator<Street> it=st.iterator();
        StringBuffer s = new StringBuffer("{'jie':[");
        
        for(int j = 1;it.hasNext();j++){
            
            Street s1 = it.next();
            
            s.append("{'name':'"+s1.getStreet_name()+"'}");
            
            if(j<st.size()){
                s.append(",");
            }
        }
        
        s.append("]}");

        Writer out =  response.getWriter();
        out.write(s.toString());
    }

    /**
     * Initialization of the servlet. <br>
     *
     * @throws ServletException if an error occurs
     */
    public void init() throws ServletException {
        System.out.println("servlet");
    }

}

您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注按钮 来关注我的博客的最新动态。 

如果文章内容对您有帮助, 不要忘记点击右下角的 推荐按钮 来支持一下哦   

如果您对文章内容有任何疑问, 可以通过评论或发邮件的方式联系我: 2276292708@qq.com

如果需要转载，请注明出处，谢谢！！