Ajax 使用 json 进行数据交互，实现级联菜单功能

来源：互联网发布：核与辐射安全中心知乎编辑：程序博客网时间：2024/05/29 10:43

级联菜单在web开发中是我们经常使用的，例如想要一种在第一个下拉框中选择不同的内容，第二个下拉框则会显示不同的内容的效果，则可以通过 ajax 和 json 来实现这一效果，上代码---

jsp 页面内容

<body>城市 ： <select id="city" onchange="getArea();"><option>--请选择城市--</option><option value="bj">北京</option><option value="sh">上海</option><option value="kf">开封</option>  </select>地区 ： <select id="area">  </select></body>

js 代码

<script type="text/javascript">function getArea(){var city = document.getElementById("city");var cityOpt = city.options[city.selectedIndex]; //获取选中的下拉对象//alert(cityOpt.value);//获取 选中的 value//alert(city.firstChild.nodeValue);//获取 选中的文本内容//进行 异步请求//创建 XMLHttpRequest 对象var xhr;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHTTP");}//发送请求xhr.open("POST","CascadeArea");xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.send("city="+cityOpt.value);//处理响应var areaselect = document.getElementById("area");xhr.onreadystatechange = function(){//重新 获取前 先清空areaselect.innerHTML = "";if(xhr.readyState==4 && xhr.status == 200){var areas = JSON.parse(xhr.responseText);for(var i=0; i<areas.length; i++){ //循环创建 下拉选项var area = document.createTextNode(areas[i]);var opt = document.createElement("option");opt.appendChild(area);areaselect.appendChild(opt);}}}}</script>

servlet 中处理请求

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubString city = (String)request.getParameter("city");System.out.println(city);//模拟 dao 查询数据库List<String> area = new ArrayList<String>();if("bj".equals(city)){area.add("朝阳区");area.add("海淀区");area.add("西二旗");}if("sh".equals(city)){area.add("虹桥区");area.add("陆家嘴");area.add("东方明珠");}if("kf".equals(city)){area.add("金明区");area.add("明伦区");area.add("河南大学");}//将集合 转成 json 字符串需要导入GSON的jar包Gson gson = new Gson();String areaStr = gson.toJson(area);//输出 json 字符串response.setHeader("Content-Type", "text/html;charSet=utf-8");response.setCharacterEncoding("utf-8");PrintWriter out = response.getWriter();out.println(areaStr);out.flush();}

实现效果

阅读全文

0 0

Ajax 使用 json 进行数据交互，实现 级联菜单功能

Ajax 使用 json 进行数据交互，实现级联菜单功能