当前位置： 移动技术网 > IT编程>开发语言>Java > j2ee之AJAX二级联动效果

j2ee之AJAX二级联动效果

2019年07月19日  | 移动技术网IT编程  | 我要评论

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

}

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网