你的位置:首页 > Java教程

[Java教程]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 //创建    function createif(window.=new else if(window.ActiveObject){        =new ActiveObject("Microsoft.);      }         }    function doAjax(url){      //初始化      create//判断对象是否初始化成功      if(null){//说明初始化正常        //请求服务器        true);        //指定回调函数        successresponse;        null);      }  };    //指定回调函数    function successresponse(){      //判定响应状态      if(){        if(){          chuli(//初始化加载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如果需要转载,请注明出处,谢谢!!