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

如果需要转载,请注明出处,谢谢!!

  

Ajax异步刷新省市级联的更多相关文章

  1. 省市级联.net

    初学javascript,编译省市级联,使用json在一般处理程序中编译,利用ajax传递数据到web前台 <html xmlns="http://www.w3.org/1999/xh ...

  2. thinkPHP中省市级联下拉列表

    公共函数放置位置common文件夹下common.php文件(此段代码也可放置在要使用的控制器中) 封装的下拉列表函数代码: /** * 根据列表拼装成一个下拉列表 ADD BY CK * @para ...

  3. JavaScript 省市级联效果

    JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  4. Ajax异步刷新地址栏url改变(利用Html5 history.pushState实现)

    早些时候在博客园参阅了不少资料,然后决定入驻博客园分享自己的开发心得,最近准备转方向筹备着辞职交接工作,所以有点忙碌,搁置了一个月才匆匆写下这么一篇随笔,希望能给大家带来一点帮助吧,资料和学识有限,如 ...

  5. JavaScript实现省市级联效果实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. javascript中的省市级联效果

    学习javascript的时候都遇到过这样的需求,不仅是省市,还有其他的一些场景,看看关键的代码有哪些吧. <head runat="server"> <titl ...

  7. 全国省市级联数据sql语句 mysql版

    全国省市级联数据sql语句 mysql版 --省级 provincial create table provincial ( provincialID int, provincialName ), p ...

  8. js省市级联实现

    js省市级联实现. for [element] in [collection] 用于循环下标,常用于json for(index in arr){ console.info("下标:&quo ...

  9. 纯js实现省市级联效果

    我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧 很 ...

随机推荐

  1. [Spring] Properties for project configuration

    We might have some project specific configuration need to setup. The good approach to do this in Spr ...

  2. HDU 5265 pog loves szh II (二分查找)

    [题目链接]click here~~ [题目大意]在给定 的数组里选两个数取模p的情况下和最大 [解题思路]: 思路见官方题解吧~~ 弱弱献上代码: Problem : 5265 ( pog love ...

  3. Javascript基本概念梳理

    javascript里的数据类型: 原始类型:数字,字符串.布尔值.(原始值:null,undefined) 对象类型:键值对,数组,function,全局对象(MATH,JSON) 保留字: abs ...

  4. iOS tableview cell 的展开收缩

    iOS tableview cell 的展开收缩 #import "ViewController.h" @interface ViewController ()<UITabl ...

  5. ZOJ 1414:Number Steps

    Number Steps Time Limit: 2 Seconds      Memory Limit: 65536 KB Starting from point (0,0) on a plane, ...

  6. 深度学习——无监督,自动编码器——尽管自动编码器与 PCA 很相似,but自动编码器既能表征线性变换,也能表征非线性变换;而 PCA 只能执行线性变换

    自动编码器是一种有三层的神经网络:输入层.隐藏层(编码层)和解码层.该网络的目的是重构其输入,使其隐藏层学习到该输入的良好表征. 自动编码器神经网络是一种无监督机器学习算法,其应用了反向传播,可将目标 ...

  7. P3199 [HNOI2009]最小圈 01分数规划

    裸题,第二个权值是自己点的个数.二分之后用spfa判负环就行了. 题目描述 考虑带权的有向图G=(V,E)G=(V,E)G=(V,E)以及w:E→Rw:E\rightarrow Rw:E→R,每条边e ...

  8. 洛谷 P2296 寻找道路 —— bfs

    题目:https://www.luogu.org/problemnew/show/P2296 第一次用 Emacs 对拍,写了半天: 注意那个 is 赋值的地方很容易错,千万别反复赋值: 一道水题写了 ...

  9. Python 返回多个值+Lambda的使用

    def MaxMin(a,b): if(a>b): return a,b else: return b,a max,min=MaxMin(8,95) print "最大值为:" ...

  10. E20170526-hm

    plain n. 平原; 平地;   adj. 平的; 素的; 清晰的; 相貌平平的; layout   n. 布局,安排,设计; 布置图,规划图; modularity    n. 模块化; 模块性 ...