个人中心
gpt4 book ai didi

j2ee之AJAX二级联动效果

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章j2ee之AJAX二级联动效果由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了AJAX二级联动效果的具体代码，供大家参考，具体内容如下 。

Ajax.js 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<%@ 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 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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二级联动效果的文章就讲到这里了,如果你想了解更多关于j2ee之AJAX二级联动效果的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： 2020最潮qq头像动漫女二次元 敢问姑娘芳龄几许我着实着迷
文章推荐： Java文件操作类 File实现代码
文章推荐： 快手女生社会头像黑白伤感 青春如此珍贵应当好好浪费
文章推荐： 浅谈java实现背包算法(0-1背包问题)
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com