`
wj603201
  • 浏览: 62279 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
xsy1994
社区版块
存档分类
最新评论

Ajax实现下拉列表联动

    博客分类：
  • AJAX
AjaxJavaServletXMLNetbeans
阅读更多
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>

分享到：
| JS中使用DOM-Drag捕捉组件位置坐标
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics