`

AJAX获得下拉框选择项[java 附完整myeclipse项目压缩包]

    博客分类:
  • Ajax
阅读更多
最近项目用到了,不刷新网页实现下拉框联动,所以写了个小Demo,现在写下来以备日后参考和跟大家分享一下。

下面直接贴代码吧

1、页面文件index.jsp,在这里使用jquery的ajax对象$.ajax。

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
	<script type="text/javascript">    
    function validatorloginName(){   
     //$("#loginName").val()等同于document.getElementById("loginName").value;
     var loginName=$("#loginName").val();
     //采用jQuery的ajax方式提交请求
     $.ajax({
     		 type: "POST",  
             url: "VaildateName",
             data: "loginName="+loginName,
             success: function(data){
                 if(data != ""){
                     setCounty(data);
                 }
             }
            });
    }
    
    //当改变省份时设置城市
    function setCounty(result){
        //得到每组
        var arrydata = result.split(";");        
        var county = document.getElementById("toCity");
        
        clearSel(county); //清空城市
        county.options.add(new Option("请选择城市..."));
        
        $.each(arrydata, function(){
            var value = this.split(",")[0];
            var text = this.split(",")[1];
            var option = new Option(text, value);
            county.options.add(option);
        }); 
    }
    
    // 清空下拉列表
    function clearSel(oSelect){
        while(oSelect.childNodes.length>0){
            oSelect.removeChild(oSelect.childNodes[0]);
        }
    }
</script>
		<title>AJAX获得下拉框选择项</title>
	</head>
	<body>
		<FORM id="myform" method="post">
			下拉框&nbsp;
			<select name="loginName" id=loginName
				onchange="validatorloginName();">
				<option value="">
					请选择...
				</option>
				<option value="a">
					北京城区
				</option>
				<option value="b">
					中国城市
				</option>
			</select>
			&nbsp;联动框&nbsp;
			<select name="toCity" id="toCity">
				<option value="">
					请选择城市...
				</option>
			</select>
		</FORM>
	</body>
</html>


2、java后台处理类,返回下拉框内容。
package com.me;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

    @SuppressWarnings("serial")
    public class VaildateName extends HttpServlet {
	    public VaildateName() {
		super();
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");

		String loginName = request.getParameter("loginName").toString();
		String tempStr = "";
		if ("a".equals(loginName)) {
			tempStr = "1,海淀区;2,朝阳区;3,东城区;4,西城区;5,丰台区;6,石景山区;7,崇文区;8,宣武区";
		} else if ("b".equals(loginName)) {
			tempStr = "1,上海;2,北京;3,天津;4,广州;5,辽宁";
		}
		response.getWriter().write(tempStr);// 此值jquery可以接收到
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doGet(request, response);
	}
}



3、web.xml,配置servlet。
<?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>VaildateName</servlet-name>
    <servlet-class>com.me.VaildateName</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>VaildateName</servlet-name>
    <url-pattern>/VaildateName</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>


到这里就实现了不刷新网页实现下拉框联动功能。希望对大家有用吧。
更多开发内容欢迎访问:苏岳宁博客

下面是工程压缩包
分享到:
评论

相关推荐

    ajax 自动提示ajax 自动提示含有下拉框

    Myeclipse是一款集成开发环境,适用于Java Web项目,因此这个示例可以在Myeclipse中运行。 标签“ajax自动提示含有下拉框”进一步确认了这个项目的核心功能,即利用Ajax实现的带有下拉提示的输入组件。 从压缩包的...

    miniui_java_myeclipse.rar_jQuery miniUI_java miniui_miniui

    这个名为 "miniui_java_myeclipse.rar" 的压缩包包含了一整套用于 Java 开发者的 MiniUI 资源,特别适配于 MyEclipse 开发环境。通过这个压缩包,开发者可以轻松地在 Java Web 项目中集成 MiniUI,创建出美观且响应...

    spket-1.6.23.rar配置myeclipse8.5的方法和所有资源

    1. **下载资源**:首先,你需要下载`spket-1.6.23.rar`压缩包,解压后得到SPket的安装文件。 2. **安装SPket**: - 打开MyEclipse,进入“Help”菜单,选择“Install New Software”。 - 在“Work with”下拉框中...

    jquery实例演示及动态效果

    例如,我们可以看到如何使用jQuery实现级联下拉框,即当用户在一个下拉框中选择一项时,根据选择自动填充另一个下拉框。 "级联"这个标签也表明了在这些实例中可能包含了联动效果,比如在多级菜单、筛选条件或地区...

Global site tag (gtag.js) - Google Analytics