ajax jsp 级联菜单（原始方式）

最新推荐文章于 2025-07-28 20:26:02 发布

jameszhao83

最新推荐文章于 2025-07-28 20:26:02 发布

阅读量139

点赞数

CC 4.0 BY-SA版权

分类专栏： java 文章标签： Ajax JSP Safari json Firefox

本文链接：https://blog.youkuaiyun.com/jameszhao83/article/details/83813543

java 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用Ajax技术从客户端向服务器发起请求，并通过Servlet处理请求返回数据的示例。示例中展示了如何利用Ajax实现异步加载省份和城市数据的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

public class ProvLoad extends HttpServlet {
    Ajax001 a1=new Ajax001();
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
        List<String> prolist=a1.loadPro();
        StringBuffer sb=new StringBuffer("[");
        for(int i=0;i<prolist.size();i++){
        	sb.append(prolist.get(i));
        	if(i<prolist.size()-1){
        	sb.append(",");	
        	}
        }
        sb.append("]");
        response.setContentType("text/json; charset=utf-8");
		response.getWriter().println(sb.toString());
	}

}

ajax js文件

function   createXmlHttpRequest(){
var xmlhttp = null;
try{
		//Firefox, Opera 8.0+, Safari
           xmlhttp=new XMLHttpRequest();
		}catch(e){//IEIE7.0以下的浏览器以ActiveX组件的方式来创建XMLHttpRequest对象
var MSXML = 
['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
  for(var n = 0; n < MSXML.length; n ++){
    try{
      xmlhttp = new ActiveXObject(MSXML[n]);
      break;
    }catch(e){}}
  }
return xmlhttp;
}
function loadcity(name){
	var xhr=createXmlHttpRequest();
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4 ||(xhr.status==200 || xhr.status==304)){
			alert(xhr.responseText);
			var ret=eval("("+xhr.responseText+")");
			alert("ret lenght:"+ret.length);
			var v="";
			for(var i=0;i<ret.length;i++){
			//	alert("retX="+ret[i]);
				v+="<option>"+ret[i]+"</option>";
			}
			//alert("v:"+v);
			document.getElementById("city").innerHTML=v;
		}
	}
	xhr.open("post","servlet/CityLoad",true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	alert(name);
	xhr.send("name="+name);
}
function loadpro(){
	var xhr=createXmlHttpRequest();
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4 ||(xhr.status==200 || xhr.status==304)){
			var ret=eval("("+xhr.responseText+")");
			var s="<option>--</option>";
			for(var i=0;i<ret.length;i++){
				s+="<option>"+ret[i]+"</option>";
			}
			document.getElementById("pro").innerHTML=s;
		}
	}
	xhr.open("get","servlet/ProvLoad",true);
	xhr.send(null);
}
window.onload=loadpro;

页面内容

  选择省份<select id="pro" onchange="loadcity(this.value)"></select>选择城市<select id="city"></select>