AJAX级联选择-优快云博客

本文链接：https://blog.youkuaiyun.com/crazy_pan/article/details/5884663

客户端页面：DynaLoadAjax.jsp

-----------------------------------------------------------------------------------------

<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>动态加载</title> <mce:script type="text/javascript"></mce:script> </head> <body> <form action=""> <table align="center" border="0" width="600"> <tr> <td width="180"> <div id="divCountry"> 国家: <select id="country" οnchange="proCountryChange();" style="width:120"> <option value="default" selected="selected">--请选择--</option> <option value="china">中国</option> </select> </div> </td> <td width="180"> <div id="divProvince" style="display:none" mce_style="display:none"> 省份: <select id="province" οnchange="proProvinceChange(this.value);" style="width:120;"> <option value="default" selected="selected">--请选择--</option> </select> </div> </td> <td width="180"> <div id="divCity" style="display:none" mce_style="display:none"> 城市: <select id="city" style="width:120"> <option value="default" selected="selected">--请选择--</option> </select> </div> </td> </tr> </table> </form> </body> </html>

--------------------------------------------------------

服务器端小程序:DynaLoadAjaxServlet.java

---------------------------------------------------------------------

package dino.ajax; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class DynaLoadAjaxServlet extends HttpServlet { /** * Constructor of the object. */ public DynaLoadAjaxServlet() { super(); } /** * Destruction of the servlet. <br> */ public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here } /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //doget()方法返回xml文本 response.setContentType("text/xml;charset=gb18030"); PrintWriter out = response.getWriter(); String type = request.getParameter("type"); StringBuffer cont = new StringBuffer(); System.out.println("------doget()-----------"); if("province".equals(type)) { List<String> proList = this.initProvices(); System.out.println("------get province-----------"); cont.append("<?xml version='1.0' encoding='gb18030'?><provinces>"); for(int i=0;i<proList.size();i++) { cont.append("<province>"); cont.append("<name>" + proList.get(i) + "</name>"); cont.append("<proId>" + i + "</proId>"); cont.append("</province>"); } cont.append("</provinces>"); } else if("city".equals(type)) { System.out.println("------get city-----------"); String proId = request.getParameter("proId"); List<String> cityList = this.initCitys(proId); cont.append("<?xml version='1.0' encoding='gb18030'?><citys>"); for(int i=0;i<cityList.size();i++) { cont.append("<city>"+ cityList.get(i)+"</city>"); } cont.append("</citys>"); } out.print(cont.toString()); out.flush(); out.close(); } /** * Initialization of the servlet. <br> * * @throws ServletException if an error occurs */ public void init() throws ServletException { // Put your code here } private List<String> initProvices() { //初始化省份数据 List<String> proList = new ArrayList<String>(); proList.add("广东"); proList.add("广西"); return proList; } private List<String> initCitys(String proId) { //初始化城市数据 List<String> cityList = new ArrayList<String>(); if("0".equals(proId)) { cityList.add("广州"); cityList.add("佛山"); cityList.add("深圳"); cityList.add("珠海"); cityList.add("中山"); } else if("1".equals(proId)) { cityList.add("南宁"); cityList.add("桂林"); cityList.add("北海"); cityList.add("柳州"); cityList.add("北流"); } return cityList; } }

----------------------------------------

web.xml配置DynaLoadAjaxServlet

-------------------------------------------------------

<servlet> <description>DynaLoadAjax servlet</description> <display-name>DynaLoadAjax servlet</display-name> <servlet-name>DynaLoadAjaxServlet</servlet-name> <servlet-class>dino.ajax.DynaLoadAjaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>DynaLoadAjaxServlet</servlet-name> <url-pattern>/servlet/DynaLoadAjaxServlet</url-pattern> </servlet-mapping>

--------------------------------------------------------------------------------------

近段时间在学习ajax

早在几个月前就接触过ajax，只是一直没有深入学习

这学期开始研究一下JavaScript(简称js)这套客户端程序语言，js麻烦之处在于不同浏览器对其有不同支持，虽然有国际组织对其进行标准化，可是不同浏览器仍是存在差异，本来js已经给冷落了，不过由于ajax技术的兴起，js再次流行，在编写js程序时，确实有点头疼。

ajax 全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

它主要使用XMLHttpRequest这个东西来发送请求和接受数据，其返回可以使xml数据和text数据，特别注意的是，发送请求和接受数据是不同线程的，小弟猜着或许是他能异步的原因，接受回来的数据使用js来解释和html来展示数据。

以上程序是小弟不才之作，是一个处理级联数据程序(不知道有没有说错，如有错误，敬请原谅)，代码写得有点乱，皆因小弟对dom不是太熟悉，还有一些代码可以封装得更好一些，小弟就不在整理了，各位大侠如有精力阅读，希望进行指点指点，感激万分。