|
锁定老帖子 主题：Ajax异步 实现联动
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (10)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-05-21
Ajax实现下拉列表联动 1.取得一级列表中的值，通过XMLHttpRequest发送给服务器； 2.服务器根据传入参数在内存或数据库中找到相应信息，返回给客户端； 3.客户端根据返回值更新二级列表。 select.html: 程序代码 <!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=UTF-8"> <title>Select</title> <script type="text/javascript" src="js/select.js"></script> </head> <body> <h2>Select</h2> <select id="first" onChange="change();"> <option value="">Please select</option> <option value="J2EE">J2EE</option> <option value="DataBase">DataBase</option> <option value="Tools">Tools</option> </select> <select id="second"> <option value="">Please select</option> </select> </body> </html> select.js: 程序代码 var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function change() { createXMLHttpRequest(); var first = document.getElementById("first").value; var timeStamp = new Date().getTime(); var url = "select.mgc?first=" + first + "×tamp=" + timeStamp; xmlHttp.onreadystatechange = callback; xmlHttp.open("GET", url, true); xmlHttp.send(null); } function callback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { parseResult(); } } } function parseResult() { var xmlDoc = xmlHttp.responseXML; var javas = xmlDoc.getElementsByTagName("java"); var second = document.getElementById("second"); second.length = 1; for (var i = 0; i < javas.length; i++) { var java = javas[i].childNodes[0].nodeValue; var len = second.length; second.options[len] = new Option(java, java); } } select.html: 程序代码 package cn.edu.ahau.mgc.ajax.select; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.Iterator; 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 Select extends HttpServlet { private List<Java> javas = new ArrayList<Java>(); @Override public void init() throws ServletException { super.init(); this.initData(); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); String first = request.getParameter("first"); List<Java> rsJavas = query(first); String xml = "<javas>"; for (Iterator<Java> iter = rsJavas.iterator(); iter.hasNext();) { Java java = (Java) iter.next(); xml += "<java>" + java.getSecond() + "</java>"; } xml += "</javas>"; response.setContentType("text/xml"); PrintWriter out = response.getWriter(); out.print(xml); out.close(); } private List<Java> query(String first) { List<Java> rsJavas = new ArrayList<Java>(); for (Iterator<Java> iter = javas.iterator(); iter.hasNext();) { Java java = (Java) iter.next(); if (java.getFirst().equals(first)) { rsJavas.add(java); } } return rsJavas; } private void initData() { javas.add(new Java("J2EE", "JSP")); javas.add(new Java("J2EE", "Servlet")); javas.add(new Java("J2EE", "Struts")); javas.add(new Java("J2EE", "Hibernate")); javas.add(new Java("J2EE", "Spring")); javas.add(new Java("DataBase", "SQL Server")); javas.add(new Java("DataBase", "MySQL")); javas.add(new Java("DataBase", "Oracle")); javas.add(new Java("DataBase", "DB2")); javas.add(new Java("Tools", "NetBeans")); javas.add(new Java("Tools", "MyEclipse")); javas.add(new Java("Tools", "JBuild")); } class Java { private String first; private String second; Java(String first, String second) { this.first = first; this.second = second; } public String getFirst() { return first; } public void setFirst(String first) { this.first = first; } public String getSecond() { return second; } public void setSecond(String second) { this.second = second; } } } web.xml: 程序代码 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>Select</servlet-name> <servlet-class>cn.edu.ahau.mgc.ajax.select.Select</servlet-class> </servlet> <servlet-mapping> <servlet-name>Select</servlet-name> <url-pattern>/select.mgc</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app> 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-05-21
你还用XMLHttpRequest这个啊，用JQ的话，可以省去好多代码啊。
|
| 返回顶楼 | |
|
发表时间：2010-05-24
最后修改：2010-05-24
|
| 返回顶楼 | |
|
发表时间：2010-05-24
把菜单信息用json格式传到页面来本地操作吧，减轻服务器压力
|
| 返回顶楼 | |
|
发表时间：2010-05-24
大规模的JS运算 很容易导致 客户端假死 javascript内存泄漏问题着实严重啊
|
| 返回顶楼 | |
|
发表时间：2010-05-24
我刚开始写js 的时候也是这么写的，AJAX的原理在代码里很清晰，但是代码太多了，js是个代码量非常大的语言，多的话确实有内存泄露问题。楼主还是用jq、prototype等框架做吧，代码量要小很多。
|
| 返回顶楼 | |
|
发表时间：2010-05-24
jquery多好啊
|
| 返回顶楼 | |
|
发表时间：2010-05-24
真没意思。。。
|
| 返回顶楼 | |
|
发表时间：2010-05-25
佩服楼主一下.........-_-!!!
|
| 返回顶楼 | |
|
发表时间：2010-05-25
koalaxyq 写道 把菜单信息用json格式传到页面来本地操作吧，减轻服务器压力
支持！ |
| 返回顶楼 | |
