首页 > 代码库 > ajax联动
ajax联动
1、编写html代码,引入ajax文件
<script type="text/javascript" src="js/ajax.js"></script><select id="provinceID" style="width:111px"> <option>选择省份</option> <option>湖南</option> <option>广东</option> </select> <select id="cityID" style="width:111px"> <option>选择城市</option> </select>
2、编写html处理代码
<script type="text/javascript"> //定位省份下拉框,同时添加内容改变事件 document.getElementById("provinceID").onchange = function(){ //清空城市下拉框中的内容,除第一项外 var cityElement = document.getElementById("cityID"); cityElement.options.length = 1; //获取选中option标签的索引号,从0开始 var index = this.selectedIndex; //定位选中的option标签 var optionElement = this[index]; //获取选中的option标签中的内容,即省份 var province = optionElement.innerHTML; //如果选中的内容不是"选择省份" if("选择省份" != province){ //NO1) var ajax = createAJAX(); //NO2) var method = "POST"; var url = "${pageContext.request.contextPath}/ProvinceCityServlet?time="+new Date().getTime(); ajax.open(method,url); //设置AJAX请求头 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //NO3) var content = "province=" + province; ajax.send(content); //---------------------------------等待 //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5)从AJAX异步对象中获取服务器响应的xml文档 var xmlDocument = ajax.responseXML; //NO6)按照DOM规则,解析XML文档 var cityElementArray = xmlDocument.getElementsByTagName("city"); var size = cityElementArray.length; for(var i=0;i<size;i++){ //innerHTML只能用在html/jsp中,不能用在xml中 var city = cityElementArray[i].firstChild.nodeValue; //<option></option> var optionElement = document.createElement("option"); //<option>广州</option> optionElement.innerHTML = city; //<select><option>广州</option></select> cityElement.appendChild(optionElement); } } } } } } </script>
3、编写java处理代码
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String province = request.getParameter("province"); //通知AJAX异步对象,服务器响应的数据为xml格式的 response.setContentType("text/xml;charset=UTF-8"); //获取字符输出流 PrintWriter pw = response.getWriter(); pw.write("<?xml version=‘1.0‘ encoding=‘UTF-8‘?>"); pw.write("<root>"); if("广东".equals(province)){ pw.write("<city>广州</city>"); pw.write("<city>深圳</city>"); pw.write("<city>中山</city>"); }else if("湖南".equals(province)){ pw.write("<city>长沙</city>"); pw.write("<city>株洲</city>"); pw.write("<city>湘潭</city>"); pw.write("<city>岳阳</city>"); } pw.write("</root>"); pw.flush(); pw.close(); }
ajax联动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。