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 如果需要转载,请注明出处,谢谢!!
Ajax异步刷新省市级联的更多相关文章
- 省市级联.net
初学javascript,编译省市级联,使用json在一般处理程序中编译,利用ajax传递数据到web前台 <html xmlns="http://www.w3.org/1999/xh ...
- thinkPHP中省市级联下拉列表
公共函数放置位置common文件夹下common.php文件(此段代码也可放置在要使用的控制器中) 封装的下拉列表函数代码: /** * 根据列表拼装成一个下拉列表 ADD BY CK * @para ...
- JavaScript 省市级联效果
JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- Ajax异步刷新地址栏url改变(利用Html5 history.pushState实现)
早些时候在博客园参阅了不少资料,然后决定入驻博客园分享自己的开发心得,最近准备转方向筹备着辞职交接工作,所以有点忙碌,搁置了一个月才匆匆写下这么一篇随笔,希望能给大家带来一点帮助吧,资料和学识有限,如 ...
- JavaScript实现省市级联效果实例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- javascript中的省市级联效果
学习javascript的时候都遇到过这样的需求,不仅是省市,还有其他的一些场景,看看关键的代码有哪些吧. <head runat="server"> <titl ...
- 全国省市级联数据sql语句 mysql版
全国省市级联数据sql语句 mysql版 --省级 provincial create table provincial ( provincialID int, provincialName ), p ...
- js省市级联实现
js省市级联实现. for [element] in [collection] 用于循环下标,常用于json for(index in arr){ console.info("下标:&quo ...
- 纯js实现省市级联效果
我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧 很 ...
随机推荐
- Redis官网下载步骤(含windows版)
①.百度redis ,进入官网 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- mysql 將時間戳直接轉換成日期時間
from_unixtime()是MySQL裏的時間函數 Sql代碼 select uid,userid,username,email,FROM_UNIXTIME(addtime,'%Y年%m月%d') ...
- Watcher 实现机制之client注冊
Zookeeper 提供的了分布式数据的公布/订阅功能,通过 Watch 机制来实现这样的分布式的通知功能. Zookeeper 同意client向server注冊一个Watch监听.当服务端的一些指 ...
- cocos2dX 之数据存储
今天我们来看cocos2dX里面的数据存储类, CCUserDefault, 如今的游戏基本都会把用户信息保存下来, 以便于再次进入游戏的时候读取, 为了方便起见,有时我们也能够用CCUserDefa ...
- Eclipse + CDT引入OpenCV失败的解决的方法
Android JNI开发中用到了OpenCV,由于想通过JNI实现,就没有去用Android层的Lib引用. 可是操作中发如今.cpp文件中include的时候发现"#include &l ...
- AVD那些事儿
启动了AVD却说找不到AVD 错误提示: No active compatible AVD's or devices found. Relaunch this configuration after ...
- kafka 生产者消费者 api接口
生产者 import java.util.Properties; import kafka.javaapi.producer.Producer; import kafka.producer.Keyed ...
- unity3D游戏开发实战原创视频讲座系列13之帽子戏法游戏开发(预告)
文件夹 第一讲 游戏演示项目创建 第二讲 游戏场景的编辑 第三讲 帽子的移动 第四讲 炮弹的产生 第六讲 游戏界面的完好 第七讲 各种UI的制作 第八讲 分数和爆炸特效 视持续更新中.. ...
- BestCoder Round #56/hdu5463 Clarke and minecraft 水题
Clarke and minecraft 问题描述 克拉克是一名人格分裂患者.某一天,克拉克分裂成了一个游戏玩家,玩起了minecraft.渐渐地,克拉克建起了一座城堡. 有一天,克拉克为了让更多的人 ...
- BZOJ 3041 水叮当的舞步
3041: 水叮当的舞步 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 120 Solved: 67[Submit][Status][Discuss ...