您的位置：首页 > 其它

Ajax异步刷新省市级联

2015-08-06 17:15 459 查看

省市级联在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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航