j2ee之AJAX二级联动效果
更新时间:2017年08月22日 17:00:52 作者:情似雨餘黏地絮
这篇文章主要为大家详细介绍了j2ee之AJAX二级联动效果的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了AJAX二级联动效果的具体代码,供大家参考,具体内容如下
Ajax.js
var createAjax = function(){ var ajax = null; try{ ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ try{ ajax = new XMLHttpRequest(); }catch(e2){ alert("请换掉你的浏览器"); } } return ajax; }
test3.xml
<%@ page language="Java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="js/ajax.js"></script> <base href="<%=basePath%>" rel="external nofollow" > <title>??</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> </head> <body> <select id="province"> <option>请选择省份</option> <option>江苏</option> <option>江西</option> </select> <select id="city"> <option>请选择城市</option> </select> <script type="text/javascript"> document.getElementById("province").onchange = function(){ var cityElement = document.getElementById("city"); cityElement.options.length = 1; /* 拿到第一个下拉框中选中的值 */ var index = this.selectedIndex; var optionElement = this[index]; var optionValue = optionElement.innerHTML; /* 把这个值发送给服务器 */ var ajax = createAjax(); var url = "${pageContext.request.contextPath }/SelectServlet?time="+new Date().getTime(); var method = "POST"; ajax.open(method , url); ajax.setRequestHeader("content-type" , "application/x-www-form-urlencoded"); var content = "province=" + optionValue; ajax.send(content); /* -----接收相应的数据----- */ ajax.onreadystatechange = function(){ if(ajax.readyState == 4 && ajax.status == 200){ /* 拿到xml */ var xmlDocument = ajax.responseXML; /* 用xml的解析方式拿到城市根据标签名称 */ var cityArray = xmlDocument.getElementsByTagName("cityOption"); for (var i = 0; i < cityArray.length; i++){ /* 用xml的解析方式拿到城市的值 */ var city = cityArray[i].firstChild.nodeValue; var option = document.createElement("option"); option.innerHTML = city; cityElement.appendChild(option); } } } } </script> </body> </html>
SelectServlet.java
package com.newtouch.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class SelectServlet */ @WebServlet("/SelectServlet") public class SelectServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public SelectServlet() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse * response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub response.getWriter().append("Served at: ").append(request.getContextPath()); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse * response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); // 这里是text/xml是把数据放到了xml中 response.setContentType("text/xml;charset=utf-8"); String province = request.getParameter("province"); response.getWriter().write("<?xml version='1.0' encoding='utf-8' ?>"); response.getWriter().write("<root>"); if ("江苏".equals(province)) { response.getWriter().write("<cityOption>1</cityOption>"); response.getWriter().write("<cityOption>2</cityOption>"); response.getWriter().write("<cityOption>3</cityOption>"); response.getWriter().write("<cityOption>4</cityOption>"); } else if ("江西".equals(province)) { response.getWriter().write("<cityOption>一</cityOption>"); response.getWriter().write("<cityOption>二</cityOption>"); response.getWriter().write("<cityOption>三</cityOption>"); response.getWriter().write("<cityOption>四</cityOption>"); } response.getWriter().write("</root>"); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- PHP+Mysql+Ajax+JS实现省市区三级联动
- ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
- jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
- Ajax二级联动菜单实现原理及代码
- 一个强健 实用的asp+ajax二级联动菜单(有演示和附源程序打包下载)
- asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
- ajax读取数据库内容实现二级联动下拉选择菜单示例
- JavaScript Ajax Json实现上下级下拉框联动效果实例代码
- Ajax实现无刷新三联动下拉框
- 落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
相关文章
Mybatis通用Mapper(tk.mybatis)的使用
本文主要介绍了Mybatis通用Mapper(tk.mybatis)的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-07-07
最新评论