AJAX获得下拉框选择项[java 附完整myeclipse项目压缩包]
最近项目用到了，不刷新网页实现下拉框联动，所以写了个小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(","); var text = this.split(","); var option = new Option(text, value); county.options.add(option); }); } // 清空下拉列表 function clearSel(oSelect){ while(oSelect.childNodes.length>0){ oSelect.removeChild(oSelect.childNodes); } }</script><title>AJAX获得下拉框选择项</title></head><body><FORM id="myform" method="post">下拉框&nbsp;<select name="loginName" id=loginNameonchange="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>
到这里就实现了不刷新网页实现下拉框联动功能。希望对大家有用吧。
更多开发内容欢迎访问：苏岳宁博客
下面是工程压缩包
页:
[1]