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 如果需要转载,请注明出处,谢谢!!
责任重于泰山,任重而道远。