j2ee之AJAX二级联动效果

2019-11-26 11:35:35

字体：大中小

来源：转载

供稿：网友

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Java文件操作类 File实现代码

下一篇：浅谈java实现背包算法(0-1背包问题)