java编程
搜索
分类

j2ee之AJAX二级联动效果

作者：情似雨餘黏地絮 时间：2021-09-13 10:06:58　

本文实例为大家分享了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>");
 }

}

来源：http://www.cnblogs.com/ShaoXin/p/7412467.html

标签：j2ee,ajax,二级联动
0
投稿

猜你喜欢

  • Java 使用Filter实现用户自动登陆

    2022-10-13 13:32:47

  • Java中的 FilterInputStream简介_动力节点Java学院整理

    2023-01-21 17:18:56

  • C# DataSet查看返回结果集的实现

    2021-10-10 09:54:31

  • Android实现换肤的两种思路分析

    2023-03-25 13:54:18

  • C#代码设置开机启动示例

    2021-12-16 17:53:07

  • Intent传递对象之Serializable和Parcelable的区别

    2022-05-27 04:02:42

  • Android调用系统默认浏览器访问的方法

    2022-04-02 12:14:52

  • Android实现手势密码功能

    2023-08-29 05:41:07

  • C#如何防止程序多次运行的技巧

    2022-11-10 01:18:59

  • C#解决汉诺塔问题DEMO

    2023-03-25 19:11:25

  • 3种Android隐藏顶部状态栏及标题栏的方法

    2022-01-14 12:48:43

  • C#设计模式之Builder生成器模式解决带老婆配置电脑问题实例

    2021-07-09 03:22:59

  • SpringBoot中属性赋值操作的实现

    2022-05-04 18:10:30

  • 浅谈Android中视图动画的属性与使用

    2023-04-15 22:41:12

  • Java volatile如何实现禁止指令重排

    2022-01-13 18:29:24

  • java 获取当前路径下的所有xml文档的方法

    2021-08-08 13:54:29

  • Android实现无标题栏全屏的方法

    2023-06-25 11:14:27

  • jvm细节探索之synchronized及实现问题分析

    2023-08-24 02:13:29

  • C#图像颜色聚类高效方法实例

    2021-09-29 09:14:41

  • java 引用传递的三种类型小结

    2023-09-03 03:59:47
    • asp之家 软件编程 m.aspxhome.com