使用AJAX技术实现网页级联下拉列表

合集下载

两天时间用AJAX写了个无限级的多级联动菜单(ajax+PHP构架)

花了两天时间。

研究ＡＪＡＸ，终于独立完成一个无限组的多级菜单联动功能。

主要特点：就是ＨＴＭＬ静态页面可以无刷新的与ＰＨＰ动态角本文件及数据库交互（这也是ＡＪＡＸ的核心目的）。

以下把代码贴出来。

供大家参考指正：ajax.js文件（位于根目录下js子目录）var xmlHttp;function createXmlHttp(){if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}else{xmlHttp=new ActiveXObject("Microsoft.XMLHttp");}}basic_inc.php(位于根目录下/include子目录下)<?php$DB_SERVER="localhost";$DB_NAME="ajax";$DB_USER="root";$DB_PASSWORD="";?>conn.php(位于根目录下/include子目录下)<?phprequire_once("dir_inc.php");require_once($ROOT_DIR."include/basic_inc.php");@ $db=mysql_connect($DB_SERVER,$DB_USER) or die ("faile!".mysql_error());@mysql_select_db($DB_NAME);?>dir_inc.php（位于根目标下/include子目录下）<?php$ROOT_DIR="../";?>select_menu.html(位于根目录下是核心前台文件)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>select_menu</title><script type="text/javascript" src="js/ajax.js">//这里引用创建xmlHttp对像的文件（对浏览器做过判断）</script><script type="text/javascript">var targetSelId; //申明一个全局变量用来存放当前要操作的对像的ＩＤvar selArray;//申明一个全局数组。

三级级联下拉菜单的实现流程

三级级联下拉菜单的实现流程1.首先，我们需要在页面上创建三个下拉菜单元素。

First, we need to create three drop-down menu elements on the page.2.然后，我们要填充第一个下拉菜单，以显示第一级的选项。

Then, we will populate the first drop-down menu to display the options for the first level.3.接着，我们需要为第一个下拉菜单添加一个事件监听器，以便在选择其中一个选项时触发下一个菜单的更新。

Next, we need to add an event listener to the first drop-down menu, so that selecting an option triggers an update to the next menu.4.然后，我们将填充第二个下拉菜单，以显示第二级的选项。

Then, we will populate the second drop-down menu to display the options for the second level.5.接下来，我们需要为第二个下拉菜单添加事件监听器，以便在选择其中一个选项时触发第三个菜单的更新。

After that, we need to add an event listener to thesecond drop-down menu, so that selecting an option triggersan update to the third menu.6.然后，我们将填充第三个下拉菜单，以显示第三级的选项。

Next, we will populate the third drop-down menu todisplay the options for the third level.7.最后，当用户选择完最后一级的选项后，我们可以获取所选择的值并进行相应的处理。

ajax两级联动下拉列表和显示相应数据

ajax两级联动下拉列表和显示相应数据
本人实现了 ajax 异步实现两级联动的下拉列表和分类显示数据：应该算是充分的实现例子，包含了 JS + CSS 的简单设计
显示：显示书籍大类 ----> 无刷新的显示相对应的书籍小类；
选择书籍小类时候，自动显示相应的书籍信息！
自己试试吧，试试才知道，很好用的
纯手写的实例，仅供学习探究！
Jsp页面：
<%@ page language="java" import="java.util.*,com.AjaxDemo.optionLists.Dao,java.sql.*;"
contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
table{
width: 500px;
text-align: center;
font: bold fantasy 25px;
}
td{
height:35px;
width: 95px;
border-bottom-width:1px;
border-bottom-color: orange;
border-bottom-style: solid;
}
书籍大类：
<%}}catch (SQLException e) {e.printStackTrace();}finally{data.close();} %>
书籍小类：
请选
择
书
籍
类
别
！。

PHPAJAX2级联动下拉列表（...

PHPAJAX2级联动下拉列表（...PHP+AJAX2级联动下拉列表（简单好用）这次给大家展示的是非常常用的一个ajax功能－－联动下拉列表，本程序采用2级联动，根据数据库的内容用ajax处理下拉列表内容，实现根据用户需求取得下拉选项，交互性强，更新容易。

废话少说，不如正题，这次依然象往常一样提供截图和源码下载，首先还是AJAX框架：var http_request=false;function send_request(url){//初始化，指定处理函数，发送请求的函数http_request=false;//开始初始化XMLHttpRequest对象if(window.XMLHttpRequest){//Mozilla浏览器http_request=new XMLHttpRequest();if(http_request.overrideMimeType){//设置MIME类别http_request.overrideMimeType("text/xml");}}else if(window.ActiveXObject){//IE浏览器try{http_request=new ActiveXObject("Msxml2.XMLHttp");}catch(e){try{http_request=new ActiveXobject("Microsoft.XMLHttp");}catch(e){}}}if(!http_request){//异常，创建对象实例失败window.alert("创建XMLHttp对象失败！");return false;}http_request.onreadystatechange=processrequest;//确定发送请求方式，URL，及是否同步执行下段代码http_request.open("GET",url,true);http_request.send(null);}//处理返回信息的函数function processrequest(){if(http_request.readyState==4){//判断对象状态if(http_request.status==200){//信息已成功返回，开始处理信息document.getElementById(reobj).innerHTML=http_request.respons eText;}else{//页面不正常alert("您所请求的页面不正常！");}}}function getclass(obj){var pid=document.form1.select1.value;document.getElementById(obj).innerHTML="<option>loading...</o ption>";send_request(‘doclass.php?pid=‘+pid);reobj=obj;}这个程序的核心就是动态添加<option>......</option>服务器端是进行数据的检索，很简单：<?phpheader("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码$pid=$_GET[‘pid‘];$db=mysql_connect("localhost","root","7529639"); //创建数据库连接mysql_query("set names ‘GBK‘");mysql_select_db("menuclass");$sql="select classname from menu where parentid=".$pid."";$result=mysql_query($sql);//循环列出选项while($rows=mysql_fetch_array($result)){echo ‘<option>‘;echo $rows[‘classname‘];echo "</option>\n";}>再看看列表页面的html：<script language="javascript" src="ajaxmenu.js"></script><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>ajax2级联动菜单演示</title></head><body><form name="form1"><select name="select1" id="class1" style="width:100;" onChange="getclass(‘class2‘);"><option selected="selected"></option><option value="1">大类1</option><option value="2">大类2</option></select><select name="select2"id="class2" style="width:100;"></select></form></body></html>附件1.jpg(1.99 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表2.jpg(3.25 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表3.jpg(5.92 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表4.jpg(5.62 KB)2007-9-24 10:04PHP+AJAX2级联动下拉列表ajaxdemo.rar(1.66 KB)2007-9-24 10:05, 下载次数: 3PHP+AJAX2级联动下拉列表搜索更多相关主题的帖子: AJAX PHP列表台州南开技术小组专门用PHP+MYSQL技术进行Web(网站、平台、系统等)开发，凭借其开发产品的非凡速度、领先的技术优势、富于创新的开发团队，为众多行业门户、专业型站点提供最有优质的服务和技术保障。

java AJAX实现级联下拉框

new
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE class SYSTEM "product.dtd" > <class> <class1 className="电脑配件" id="1"> <class2 className="内存" id="1"> <class3 id="1" className="kingmax"></class3> <class3 id="2" className="kingston"></class3> <class3 id="3" className="samsung"></class3> <class3 id="4" className="hydadi"></class3> <class3 id="5" className="ibm"></class3> </class2> <class2 className="硬盘" id="2"> <class3 id="6" className="hithait"></class3> <class3 id="7" className="IBM"></class3> <class3 id="8" className="samsung"></class3> <class3 id="9" className="westdata"></class3> </class2> </class1> <class1 className="食品配件" id="2"> <class2 className="汉堡包" id="1"> <class3 id="1" className="麦当劳"></class3> <class3 id="2" className="肯得基"></class3> <class3 id="3" className="罗杰丝"></claቤተ መጻሕፍቲ ባይዱs3>

级联菜单、连库查询(ajax)

//如果异步调用成功 --> XMLHttpRequest对象的status属性值为200 , html文件在本地运行,则xmlHttp.status的返回值为0,故应该加上xmlHttp.status==0
if(xmlHttp.status==200 || xmlHttp.status==0)
function BuildSel(str,sel)
{
//先清空原来的数据.
sel.options.length=0;
//定义一个数组对象
var substr= new Array();
substr = str.split(",");
<fieldset style="padding-left: 10%">
<legend>
区域查询：
</legend>
<label><select name="sheng" id="sheng" >
<option value="河北省">河北省</option>
<%}
%>
</select>县</label>
<label> <select name="xiang" id="xiang" onchange="changexiang(this.value)">
//subarrstr=substr[i].split("|");
sel.options.add(new Option(substr[i],substr[i]));

使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例

使⽤Ajax和Jquery配合数据库实现下拉框的⼆级联动的⽰例⾸先我们需要先建⽴好数据库，将⼀些数据插⼊进去需要两张表：province：省份表city：城市表如图：然后再在java中建⽴相关的实体类与之对应再然后，我们就能开始做jdbc的操作了public class ConnectionFactory {private static String driver;private static String url;private static String user;private static String password;static {Properties prop = new Properties();//读取⽂件try {InputStream in = ConnectionFactory.class.getResourceAsStream("./jdbc.properties");prop.load(in);driver = prop.getProperty("jdbc.driver");url = prop.getProperty("jdbc.url");user = prop.getProperty("er");password = prop.getProperty("jdbc.password");} catch (IOException e) {e.printStackTrace();}}/*** 获取连接对象* @returnpublic static Connection getConnection(){Connection conn = null;try {Class.forName(driver);conn = DriverManager.getConnection(url, user, password);} catch (Exception e) {throw new RuntimeException(e);}return conn;}/*** 关闭资源* @param conn* @param pstmt* @param stmt* @param rs*/public static void close(Connection conn,PreparedStatement pstmt,Statement stmt,ResultSet rs){ try {if (conn != null) {conn.close();}if (pstmt != null) {pstmt.close();}if (stmt != null) {stmt.close();}if (rs != null) {rs.close();}} catch (SQLException e) {throw new RuntimeException(e);}}⾸先我们可以在页⾯加载的时候获取所有省份的信息，SQL语句如下Connection conn = null;PreparedStatement pstmt = null;Province province2 = null;@Overridepublic ArrayList<Province> findAllPro() {ResultSet rs = null;ArrayList<Province> pros = null;try {String sql = "select id,place from province";conn = ConnectionFactory.getConnection();pstmt = conn.prepareStatement(sql);pros = new ArrayList<Province>();rs = pstmt.executeQuery();while(rs.next()){Province province = new Province();province.setId(rs.getInt(1));province.setPlace(rs.getString(2));pros.add(province);}} catch (SQLException e) {throw new RuntimeException(e);}return pros;将查到的数据放到后台,建⽴⼀个SelectedServlet类，⽤于接收查询到的所有省份的信息response.setContentType("application/json;charset=utf-8");response.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");//创建⼀个Place对象ArrayList<Province> pros= new Place().findAllPro();PrintWriter out = response.getWriter();//将集合直接转换为Json对象out.write(JSONArray.fromObject(pros).toString());在这⾥会⽤到集合转换Json对象，我们需要导⼊以下⼏个包然后我们开始写前台页⾯：<body>省份:<select id="province"><option>--请选择省份--</option></select>城市:<select id="city"><option>--请选择城市--</option></select><br/><br/><span></span></body>然后jQuery代码如下:（由于我导⼊的jQuery版本⽐较低，所以使⽤的⽅法是getJSON，⽽不是getJson）$.getJSON("SelectedServlet",function(data,textStatus){var provinces = data;var res = "";for(var i =0;i<provinces.length;i++){<span style="white-space:pre"> </span>res += "<option>"+provinces[i].place+"</option>";}$("#province").append(res);});这样就能在页⾯加载的时候获取到数据然后我们再来做联动，⾸先给下拉框添加⼀个change事件，然后获取选中的信息，将选中的信息发送到另⼀个CityServlet中//下拉框改变时触发的事件$("#province").change(function(){var seled = $("option:selected").html();$("span").html(seled);$.getJSON("CityServlet",{"province":encodeURI(encodeURI(seled))},function(data){$("#city").html("");var citys = data;var res = "";for(var i = 0;i<citys.length;i++){res += "<option>"+citys[i].place+"</option>";}$("#city").append(res);});});服务器通过获得的信息通过sql语句查询出来，SQL代码如下：public ArrayList<City> findAllCityByPro(String name) {ResultSet rs = null;ArrayList<City> citys = null;try {//通过名字获得所有值String sql = "select c.city_place from city c ,"+ "province p where c.province_id = "+ " (select id from province where place = '"+ name +"') "+ " and c.province_id = p.id";conn = ConnectionFactory.getConnection();pstmt = conn.prepareStatement(sql);citys = new ArrayList<City>();System.out.println(sql);rs = pstmt.executeQuery();while(rs.next()){City city = new City();city.setPlace(rs.getString(1));citys.add(city);}System.out.println(citys);} catch (SQLException e) {e.printStackTrace();}return citys;}将查询到的数据发送到后台，后台接收到数据后将其转换为Json对象，并通过回调函数发送到前台，然后前台就可以通过事件直接获取到数据，⽽不⽤各种跳转页⾯，这就是Ajax(Asynchronous Javascript And XML),protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("application/json;charset=utf-8");response.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");// String proName = "浙江";String proName = URLDecoder.decode(URLDecoder.decode(request.getParameter("province"), "utf-8"),"utf-8");ArrayList<City> citys= new Place().findAllCityByPro(proName);PrintWriter out = response.getWriter();out.write(JSONArray.fromObject(citys).toString());}⾄于显⽰页⾯的代码也在前⾯写到jQuery语句中了效果如下：以上这篇使⽤Ajax和Jquery配合数据库实现下拉框的⼆级联动的⽰例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

JS+AJAX实现省市区的下拉列表联动

JS+AJAX实现省市区的下拉列表联动本⽂实例为⼤家分享了JS+AJAX实现省市区下拉列表联动的具体代码，供⼤家参考，具体内容如下效果图如下，DB中存取的数据来抽取.前台JSP页⾯的实现<div class="info"><div class="title">企业地址:</div><div class="value"><fieldset disabled><select id="provinceSelect" class="form-control" data-val="${factoryCenterInfo.province}" οnchange="provinceChange()"><c:forEach items="${factoryPlace.provinceList}" var="province" varStatus="status"><option value="${province.key}" <span style="color:#3333ff;"><c:if test="${factoryCenterInfo.province == province.key}">selected</c:if></span><span style="color:#3366ff;">></span>${province.value}</option> </c:forEach></select></fieldset><fieldset disabled><select id="citySelect" class="form-control" data-val="${factoryCenterInfo.city}" οnchange="cityChange()"><c:forEach items="${factoryPlace.cityList}" var="city" varStatus="status"><option value="${city.key}" <span style="color:#3333ff;"><c:if test="${factoryCenterInfo.city == city.key}">selected</c:if></span>>${city.value}</option></c:forEach></select></fieldset><fieldset disabled><select id="areaSelect" class="form-control" data-val="${factoryCenterInfo.area}"><c:forEach items="${factoryPlace.areaList}" var="area" varStatus="status"><option value="${area.key}" <span style="color:#3333ff;"><c:if test="${factoryCenterInfo.area == area.key}">selected</c:if></span>>${area.value}</option></c:forEach></select></fieldset></div></div>JS实现代码效果：实现多次ajax请求，联动搜索数据function provinceChange(){var provinceId = $("#provinceSelect").val();$("#citySelect").empty();$("#areaSelect").empty();if(provinceId != null && provinceId != ""){$.ajax({type: "POST",url:"<span style="color:#3333ff;">factory/getChangeList</span>",dataType:'json',data: {"parentId":provinceId,"placeKbn":"C"},cache:false,success: function(data){if("success" == data.result){if(data.cityList != null && data.cityList.length > 0){for(var i = 0;i < data.cityList.length;i++){var city = data.cityList[i];var key = (city.key == null? "":city.key);var value = (city.value == null? "":city.value);$("#citySelect").append("<option value = \"" + key + "\">"+ value +"</option>");}}else{$("#citySelect").append("<option> </option>");}$("#areaSelect").append("<option> </option>");}if("error" == data.result){$("#citySelect").append("<option> </option>");$("#areaSelect").append("<option> </option>");}},error:function(XMLHttpRequest, textStatus, errorThrown){$("#errorContent").html("系统异常请联系管理员");}});}else{$("#citySelect").append("<option> </option>");$("#areaSelect").append("<option> </option>");}}function cityChange(){var cityId = $("#citySelect").val();$("#areaSelect").empty();if(cityId != null && cityId != ""){$.ajax({type: "POST",url:"<span style="color:#3333ff;">factory/getChangeList</span>",dataType:'json',data: {"parentId":cityId,"placeKbn":"Q"},cache:false,success: function(data){if("success" == data.result){if(data.areaList != null && data.areaList.length > 0){for(var i = 0;i < data.areaList.length;i++){var area = data.areaList[i];var key = (area.key == null? "":area.key);var value = (area.value == null? "":area.value);$("#areaSelect").append("<option value = \"" + key + "\">"+ value +"</option>");}}else{$("#areaSelect").append("<option> </option>");}}if("error" == data.result){$("#areaSelect").append("<option> </option>");}},error:function(XMLHttpRequest, textStatus, errorThrown){$("#errorContent").html("系统异常请联系管理员");}});}else{$("#citySelect").append("<option> </option>");$("#areaSelect").append("<option> </option>");}}后台controller实现代码@RequestMapping("<span style="color:#3333ff;">getChangeList</span>")@ResponseBodypublic Object getChangeList(String parentId,String placeKbn){logBefore(logger, "factory/getChangeList");Map<String,Object> returnMap = new HashMap<String,Object>();if(FactoryConsts.CHAR_KBN_CITY.equals(placeKbn)){if(getPlacelist( parentId, placeKbn) != null && getPlacelist( parentId, placeKbn).size() > FactoryConsts.INT_0){ returnMap.put("result", "success");returnMap.put("cityList", getPlacelist(parentId, placeKbn));}else{returnMap.put("error", "市列表为空");returnMap.put("cityList", "");}}else if(FactoryConsts.CHAR_KBN_AREA.equals(placeKbn)){if(getPlacelist( parentId, placeKbn) != null && getPlacelist( parentId, placeKbn).size() > FactoryConsts.INT_0){ returnMap.put("result", "success");returnMap.put("areaList", getPlacelist(parentId, placeKbn));}else{returnMap.put("error", "区列表为空");returnMap.put("areaList", "");}}return returnMap;}/*** 省下拉列表** @return*/private List<PlaceOption> getPlacelist(String parentId,String kbn){//下拉列表List<PlaceOption> placeList = new ArrayList<PlaceOption>();placeList.add(new PlaceOption());QueryPlaceInfoParam queryParam = new QueryPlaceInfoParam();queryParam.setPlaceKbn(kbn);if(!StringUtils.isEmpty(parentId)){queryParam.setPlaceId(Integer.valueOf(parentId));}FactoryPlaceNameResult placeResult = placeInfoService.queryPlaceInfo(queryParam);if(placeResult != null && "0".equals(placeResult.getResult())&& placeResult.getPlaceInfo() != null&& placeResult.getPlaceInfo().size() > FactoryConsts.INT_0){List<PlaceInfoFa> placeInfo = new ArrayList<PlaceInfoFa>();placeInfo = placeResult.getPlaceInfo();for(FactoryPlaceInfo info : placeInfo){PlaceOption option = new PlaceOption();option.setKey(String.valueOf(info.getPlaceId()));option.setValue(info.getPlaceName());placeList.add(option);}}return placeList;}同时点画⾯menu的时候，画⾯初期话的时候controller实现/*** 基本信息初期化⽅法** @param request* @return*/@RequestMapping("toFactoryBaseInfo")public ModelAndView toFactoryBaseInfo(HttpServletRequest request){logBefore(logger, "factory/toFactoryBaseInfo");ModelAndView mv = new ModelAndView();//企业类型Map<String,String> factoryTypeMap = new TreeMap<String,String>();factoryTypeMap.putAll(FactoryConsts.FACTORY_TYPE_MAP);mv.addObject("factoryTypeMap", factoryTypeMap);FactoryFactoryInfo factoryInfo = (FactoryFactoryInfo) request.getSession().getAttribute(Const.SESSION_FACTORY);//取得企业信息FactoryFactoryInfoParam infoParam = new FactoryFactoryInfoParam();FactoryFactoryInfoResult infoResult = new FactoryFactoryInfoResult();infoParam.setFactoryId(String.valueOf(factoryInfo.getFactoryId()));infoParam.setDifferent(FactoryConsts.STRING_WEB_ONE); //webinfoResult = factoryService.factoryInfo(infoParam);FactoryPlace factoryPlace = new FactoryPlace();<span style="color:#3333ff;">// 省下拉列表factoryPlace.setProvinceList(getPlacelist("0",FactoryConsts.CHAR_KBN_PROVINCE));// 市下拉列表factoryPlace.setCityList(getPlacelist(infoResult.getFactoryInfoEx().getProvince(),FactoryConsts.CHAR_KBN_CITY));// 区下拉列表factoryPlace.setAreaList(getPlacelist(infoResult.getFactoryInfoEx().getCity(),FactoryConsts.CHAR_KBN_AREA));</span> <span style="color:#cc66cc;">mv.addObject("factoryPlace", factoryPlace);//地址的列表</span><span style="color:#6633ff;">mv.addObject("factoryCenterInfo", infoResult.getFactoryInfoEx());//企业表的基本信息</span> mv.setViewName("factory/factoryInformationCenter/saveFactoryBaseInfo");return mv;}多级联动效果就能实现了。

jquery的ajax调用后台服务方法实现下拉框联动时,json解析问题

jquery的ajax调用后台服务方法实现下拉框联动时,json解析问题主题：jquery 的ajax 调用后台服务方法实现下拉框联动时，json 解析问题内容部分我在页面中通过ajax 调用后台方法服务，实现联动！ajax 方法如下： JavaScript code ?123456 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22232$.ajax({type: "post",async: false,contentType: "application/json; charset=utf-8",data: "{id:'" + id + "'}",url: "AllAssessResults.aspx/GetObjListByDept Id", //后台webservice 里的方法名称dataType: "json",success: function (data) {alert(data);var optionstring = "";var dataObj = $.parseJSON(data);//var dataObj = eval("(" + data + ")");for (var i = 0; i < dataObj.length; i++) {optionstring += "" + dataObj[i].username + ""; }$("#selectObj").html(optionstring);},error: function (msg) {alert("出错了！");}});4后台得到的json数据如下：[{ "username":"魏", "usercode":"A1"},{ "username":"邢", "usercode":"A2"},{ "username":"杨", "usercode":"A3"},{ "username":"王", "usercode":"A4"},{ "username":"叶", "usercode":"A5"},{ "username":"宋", "usercode":"A6"},{ "username":"苏", "usercode":"A7"}]解析时候总是提示我：'length' 为空或不是对象应该是这个【dataObj.length】。

layuiAjax请求给下拉框赋值的实例

layuiAjax请求给下拉框赋值的实例如下所⽰：<!DOCTYPE html><html><head><title>排课设置</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="renderer" content="webkit"><link rel="stylesheet" href="/vendor/layui/css/layui.css" rel="external nofollow" media="all"></head><body><div class="layui-form" lay-filter="boardFilter"><hr><div class="layui-form-pane layui-tab-content" style="margin: -10px auto;"><div class="layui-inline"><label class="layui-form-label" style="width: 100px;">查询内容</label><div class="layui-input-inline" style="width: 250px;"><input class="layui-input" name="schName" placeholder="请输⼊学校名称" id="schName" autocomplete="off"></div></div><div class="layui-inline"><label class="layui-form-label" style="width: 100px;">学期</label><div class="layui-input-inline" style="width: 200px;"><select name="termId" id="termId"></select></div></div><div class="layui-inline"><label class="layui-form-label" style="width: 100px;">列表状态</label><div class="layui-input-inline" style="width: 150px;"><select name="msgType" id="msgType"><option value="">全部状态</option><option value="1">申请中</option><option value="2">确认申请</option><option value="3">已经发布</option><option value="0">已撤销</option></select></div></div><div class="layui-inline toolbarBtn"><button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="getSearch" id="getSearch" name="getSearch"><i class="layui-icon"></i> 查询</button> </div></div></div><table class="layui-table" id="infoTable" lay-filter="filterTable"></table><script type="text/javascript" src="/vendor/jquery/jquery-1.11.3.min.js"></script><script type="text/javascript" src="/vendor/layui/layui.js"></script><script type="text/html" id="action"><a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="view">查看</a>{{# if(d.status===2){ }}<a class="layui-btn layui-btn-xs" lay-event="send">推送</a>{{# } }}{{# if(d.status===3){ }}<a href='{{d.url}}' class='layui-btn layui-btn-xs'>下载排课表</a>{{# } }}</script><script type="text/html" id="courseArrangeFlag">{{# if(d.courseArrangeFlag===0){ }}<h>⾏政班排课</h>{{# } else { }}<h>⾛班排课</h>{{# } }}</script><script type="text/html" id="status">{{# if(d.status===0){ }}<h>撤消申请</h>{{# } else if(d.status===1){ }}<h>申请中</h>{{# } else if(d.status===2){ }}<h>排课中</h>{{# } else if(d.status===3){ }}<h>已经推送</h>{{# } else if(d.status===4){ }}<h>已发布课程表</h>{{# } }}</script><script>e(['table','layer'], function() {var table = layui.table,form = layui.form;var $ = layui.jquery, layer = yer;var tableIns = table.render({elem: '#infoTable',url: '/web/courseArrange/list',id: 'idTable',page: true,limits: [10,20,50,100],limit: 10 //默认采⽤10,cols: [[ //标题栏{checkbox: true, fixed: true},{field: 'courseArrangeId', title: '序号', fixed: true},{field: 'schName', title: '学校名称'},{field: 'courseArrangeFlag', title: '排课类型', templet: '#courseArrangeFlag'},{field: 'termName', title: '学期'},{field: 'recordTime', title: '申请时间'},{field: 'status', title: '状态', templet: '#status'},{field: 'action', title: '操作', templet: '#action'}]]});//监听管理操作form.on('switch(schControlInput)', function(obj){var normalValueif(obj.elem.checked){normalValue = '0';}else{normalValue = '1';}$.ajax({url:'/school/editIsNormalSchool',type:"POST",dataType:"json",data:{"schId":this.value, "statusValue":normalValue},success:function(res){location.reload();},});});// 监听Table⼯具条table.on('tool(filterTable)', function(obj) {var data = obj.data;if (obj.event === 'view') {location.href="courseArrangeView.html?id=" rel="external nofollow" +data.courseArrangeId+"&schId="+data.schId+"&areaId="+data.areaId;}else if (obj.event === 'send') {layer.open({type: 2,title: '导⼊并推送',maxmin: true,shadeClose: false, //点击遮罩关闭层area : ['700px' , '600px'],content: '/page/business/course/courseArrangeUpload.html?schId='+data.schId+'&areaId='+data.areaId+'&termId='+data.termId+'&courseArrangeFlag='+data.courseArrangeFlag+'&phone='+data.phone ,btn: '关闭',btnAlign: 'c' //按钮居中,shade: 0 //不显⽰遮罩,yes: function(){layer.closeAll();},end: function () {location.reload();}});}});form.on('submit(getSearch)', function(data){table.reload('idTable', {where: data.field});});$(document).ready(function () {$("select[name=termNm]").empty();$.ajax({async: false,type: "POST",url: "/web/courseArrange/termList",dataType: "json",data: {},success: function (res) {var opt = "<option value='' selected = \'selected\'>全部</option>";$("select[name=termId]").append(opt);for(var i=0; i<res.data.length; i++){var option="<option value=\""+res.data[i].termId+"\"";option += ">"+res.data[i].termName+"</option>"; //动态添加数据$("select[name=termId]").append(option);}layui.form.render('select','boardFilter');}});});});</script></body></html>以上这篇layui Ajax请求给下拉框赋值的实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

Jquery中Ajax实现下拉列表联动

Jquery中Ajax实现下拉列表联动(转载)【Js代码如下】：<script src="Js/jquery-1.2.6.js"type="text/javascript"></script><script language="javascript" type="text/javascript">$(function() {BindUnit();Change();});//下拉列表change事件function Change() {$("#sel_unit").change(function() {BindUnit_User();});}functionBindUnit() {$.ajax({type: "POST",contentType: "application/json",url: "WebService.asmx/GetUnitDS",data: "{}", //即使参数为空，也需要设置dataType: 'xml', //返回的类型为XMLsuccess: function(result) { //成功时执行的方法//捕获处理过程中的异常并输出try {$("#sel_unit").empty();$(result).find("Table").each(function(i) { $("#sel_unit").append(" <option value='" +$(this).find("org_id").text() + "'>" +$(this).find("org_name").text() + "</option>"); });BindUnit_User();}catch (e) {alert(e);return;}}, error: function(result, status) { //出错时会执行这里的回调函数if (status == 'error') { alert(status); }}});}functionBindUnit_User() {varval = $("#sel_unitoption:selected").val();varmydata = '{"org_id":"'+val+'"}': //格式为json的参数，这中间最麻烦，最容易出错的也是拼接Json字符串，字符型参数的值要添加引号，而且对于用户输入的文本字段要对',/等进行特殊处理//varmydata = {"org_id":val}:这种方式是错误的，会报“无效的JS 基元”之类的错误。

ajax获取json格式二级联动下拉菜单

ajax获取json格式⼆级联动下拉菜单在后台交互获得的数据json数据，在前台交互得不到他的值。

，原来要⽤eval（）对json数据进⾏转换成对象！！再⽤$.each()函数进⾏循环输出。

1.在1.php中关键代码<div><select name='s' id='ss' onchange="return show(this.value)"><option value="default">请选择</option><?php foreach($arr as $v){?><option value="<?=$v['id']?>"><?=$v['title']?></option><?php }?></select><select name="g" id="gg"><option value="default">--default--</option><option value="v1">t1</option><option value="v2">t2</option><option value="v3">t3</option></select></div>javascript代码为：function show(n){var id = n;$.ajax({type:'GET',url:'2.php',data:'id='+id,success:function(data){var gg = $("#gg");gg.empty(); //每次清空选项。

跟我学AJAX技术——如何应用AJAX技术实现级联菜单的Web应用示例

1.1跟我学AJAX技术——如何应用AJAX技术实现级联菜单的Web应用示例1.1.1常规的Web级联菜单所存在的问题以前，为了避免每次对菜单的操作引起的重载页面，不采用每次调用后台的方式，而是一次性地将级联菜单的所有数据全部读取出来并写入到数组中，然后根据用户的操作用JavaScript+CSS来控制它的子集项目的显示，这样虽然解决了操作响应的速度、不重载页面以及避免向服务器频繁发送请求的问题，但是如果用户不对菜单进行操作或者只对菜单中的一部分进行操作的话，那读取的数据中的一部分就会成为多余而浪费用户的资源，特别是在菜单的结构复杂、数据量大的情况下，这样的弊端就更为突出！而如果采用AJAX技术来实现（JavaScript+CSS+AJAX），在页面初始化的时候，我们只需要读出其一级菜单的数据并显示出。

而在用户操作时，则通过AJAX向后台请求其下一级的菜单数据并显示出------这样，需要什么就下载什么！1.1.2构建本示例的Web应用项目1、添加一个JSP页面ajaxMenu.jsp（1）创建ajaxMenu.jsp页面文件（2）在该页面中添加一个表格，并且在其中放上超链接<%@ page language="java" pageEncoding="GB18030"%><%@ taglib uri="/tags-bean" prefix="bean" %><%@ taglib uri="/tags-html" prefix="html" %><%@ taglib uri="/tags-logic" prefix="logic" %><%@ taglib uri="/tags-tiles" prefix="tiles" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html:html lang="true"><head><html:base /><script language="javascript" src="ajaxMenu.js"></script><title>ajaxMenu1.jsp</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"></head><body><table width="200" border="0" cellspacing="0" cellpadding="0"> <tr><td height="20"><a href="#" onclick="showSubMenu('menu_1')" >菜单一</a></td></tr><tr><td height="20" id="menu_1" style="display:none"> </td></tr><tr><td height="20"><a href="#" onclick="showSubMenu('menu_2')">菜单二</a></td><tr ><td height="20" id="menu_2" style="display:none"> </td></tr></table></body></html:html>（3）ajaxMenu.jsp页面文件的预览示图2、再添加JavaScript的文件ajaxMenu.js（1）创建JavaScript文件ajaxMenu.js（2）编程ajaxMenu.js文件中的功能实现代码var httpRequest;var currentPos;function showSubMenu(newCurrentPos){document.getElementById(newCurrentPos).parentNode.style.display="";currentPos=newCurrentPos;if(document.getElementById(newCurrentPos).style.display == "none"){document.getElementById(newCurrentPos).style.display = "";sendRequest("/AJAXWebApp/ajaxmenu.do?playPos="+newCurrentPos);}else{document.getElementById(newCurrentPos).style.display = "none";}}function sendRequest(requestURL){httpRequest=getHTTPRequestObject();httpRequest.onreadystatechange = processHttpResponse;httpRequest.open("GET", requestURL, true); // Get 请求方式的代码httpRequest.send(null);}function getHTTPRequestObject(){var httpRequestObject;if (window.XMLHttpRequest){ // Mozilla, Safari, ...httpRequestObject = new XMLHttpRequest();}else if (window.ActiveXObject){ // IEtry{httpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");}catch (e){try{httpRequestObject= new ActiveXObject("Msxml2.XMLHTTP");}catch (e2){alert("您的浏览器有问题！");}}}return httpRequestObject;}function processHttpResponse (){if (httpRequest.readyState == 4){if (httpRequest.status == 200){ //检查是否成功接收了服务器响应parseResponseText();}else if(httpRequest.status == 404){alert("没有找到与所请求的文件相匹配的资源！");}else{alert("你所请求的页面发生异常，错误代码为："+httpRequest.status);}}else{document.getElementById(currentPos).innerHTML = "检测中，请稍等...";}}function parseResponseText(){document.getElementById(currentPos).innerHTML=httpRequest.responseText;}function LoadJS(file) //动态加载JS文件{var head = document.getElementsByTagName('HEAD').item(0);var script = document.createElement('SCRIPT');script.src = file;script.type = "text/javascript";head.appendChild(script);}3、添加一个Action类（1）切换到可视化设计视图（2）设置类名称为AjaxMenuAction，程序包名称为com.px1987.webajax.action /ajaxmenu（3）将产生出下面的Action类（4）编程AjaxMenuAction程序类中的功能实现方法package com.px1987.webajax.action;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.struts.action.Action;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionForward;import org.apache.struts.action.ActionMapping;import java.io.*;public class AjaxMenuAction extends Action{public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) {response.setContentType("text/html; charset=GBK");try{PrintWriter out = response.getWriter();String playPos = request.getParameter("playPos");if(playPos.equals("menu_1")){ //实际可以访问数据库表来获得各个子菜单项目String subMenuText="   <a href='#'>菜单一中的子菜单一</a><br>"+"   <a href='#'>菜单一中的子菜单二</a><br>"+"   <a href='#'>菜单一中的子菜单三</a>";out.write(subMenuText);out.close();}else if(playPos.equals("menu_2") ){String subMenuText="   <a href='#'>菜单二中的子菜单一</a><br>"+"   <a href='#'>菜单二中的子菜单二</a><br>"+"   <a href='#'>菜单二中的子菜单三</a><br>"+"   <a href='#'>菜单二中的子菜单四</a>";out.write(subMenuText);out.close();}}catch(IOException e){System.out.println(e.getMessage());}return null;}}4、执行该功能（1）部署本示例项目（2）输入http://127.0.0.1:8080/StrutsAJAXWebApp/ajaxMenu.jsp（3）点击上面的菜单的链接，将展开对应的菜单项目（4）如果再次点击上面的菜单的链接，将关闭对应的菜单项目。

跟我学AJAX技术——应用AJAX实现“内容可变”的级联菜单的Web应用示例(第二部分)

1.1跟我学AJAX技术——应用AJAX实现“内容可变”的级联菜单的Web应用示例（第二部分）1.1.1在项目中添加系统后台管理的首页面1、在项目中添加一个文件目录systemManage代表后台信息管理目录2、在systemManage目录中添加一个JSP页面index.jsp，在该页面中显示AJAX的树菜单（1）添加一个index.jsp页面（2）index.jsp页面的内容如下——并注意在其中对资源文件的引用<%@ page isELIgnored="false" pageEncoding="gb2312"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>蓝梦集团CRM系统后台系统管理的首页面</title><link href="${pageContext.request.contextPath}/css/pageContentStyle.css"rel="stylesheet" type="text/css" /><script language="javascript" type="text/javascript"src="${pageContext.request.contextPath}/javascript/commonJavaScri pt.js" ></script></head><body><jsp:include page="/commonPage/pageHead.jsp" ></jsp:include><jsp:include page="/commonPage/navMenuBar.jsp" ></jsp:include><br /><br /><jsp:include page="/commonPage/authorInfo.jsp" ></jsp:include></body></html>（3）在浏览器中浏览该页面http://127.0.0.1:8080/webcrm/systemManage/index.jsp1.1.2在该页面中添加树形菜单1、在该页面中添加一个主菜单项目，并且在其中放上超链接（1）此时的index.jsp页面的内容如下<%@ page pageEncoding="gb2312"%><%@ taglib prefix="c" uri="/jsp/jstl/core"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>蓝梦集团CRM系统后台系统管理的首页面</title><link href="<c:url value='/css/pageContentStyle.css'/>" rel="stylesheet" type="text/css" /> <script language="javascript" src="<c:url value='/javascript/commonJavaScript.js'/>"type="text/javascript"></script><script language="javascript" type="text/javascript">function showSomeOneSubMenu(mainMenuDivID){}</script></head><body><jsp:include page="/commonPage/pageHead.jsp" ></jsp:include><jsp:include page="/commonPage/navMenuBar.jsp" ></jsp:include><br/><br/><div id="rootMenuID" ><div><img src="${pageContext.request.contextPath}/images/xml.gif" /><a href="#"onclick="showSomeOneSubMenu('userGeneralInfo_mainMenu')" >客户概况信息分析</a></div><div id="userGeneralInfo_mainMenu" style="display:none"></div> <div><img src="${pageContext.request.contextPath}/images/xml.gif" /><a href="#" onclick="showSomeOneSubMenu('userLoyalInfo_mainMenu')" >客户忠诚度分析</a></div><div id="userLoyalInfo_mainMenu" style="display:none"></div> <div><img src="${pageContext.request.contextPath}/images/xml.gif" /><a href="#" onclick="showSomeOneSubMenu('userProfitInfo_mainMenu')" >客户利润信息分析</a></div><div id="userProfitInfo_mainMenu" style="display:none"></div> <div><img src="${pageContext.request.contextPath}/images/xml.gif" /><a href="#"onclick="showSomeOneSubMenu('reportStatisticsInfo_mainMenu')" >报表统计信息分析</a></div><div id="reportStatisticsInfo_mainMenu" style="display:none"></div></div><br/><br/><jsp:include page="/commonPage/authorInfo.jsp" ></jsp:include></body></html>（2）在浏览器中浏览该页面后的结果http://127.0.0.1:8080/sshwebcrm/systemManage/index.jsp4、在当前项目中添加一个dealAJAXTreeMenu.js文件（1）文件名为dealAJAXTreeMenu.js（2）在其中进行编程使用外部JavaScript 文件不仅仅意味着不用在多个文件之间复制JavaScript 代码，而且JavaScript 代码会被Web浏览器缓存，不必在每个子页面加载时重复加载一遍。

使用AJAX技术实现网页级联下拉列表

使用AJAX技术实现网页级联下拉列表
张立新
【期刊名称】《电脑开发与应用》
【年(卷),期】2014(000)001
【摘要】AJAX能够提升用户体验，方便地与Web应用程序进行交互。

论述了AJAX Web应用模型和实现过程，在ASP环境下通过异步通信方式实现了网页下拉列表的多级联动。

%AJAX can improve the user experience and interact with Web applications easily. This paper discusses the AJAX Web application model and implementation process, realizes the web page cascading drop-down lists by means of asynchronous communication in ASP environment.
【总页数】4页(P10-12,15)
【作者】张立新
【作者单位】乌鲁木齐职业大学现代教育技术中心，乌鲁木齐 830002
【正文语种】中文
【中图分类】TP393
【相关文献】
1.基于Ajax技术的网页动态更新设计与实现 [J], 贾英;李玉霜;郝惠君
2.网页下拉列表框菜单跳转的三种实现方法 [J], 柯绍伟
3.利用Ajax技术实现级联式组合框 [J], 张建
4.基于PHP和Ajax技术的在线网页闹铃的设计与实现 [J], 周宇舸
5.在Web2.0设计模式下利用Ajax技术实现网页数据动态更新 [J], 王莉军
因版权原因，仅展示原文概要，查看原文内容请购买。

Ajax 实现级联菜单

Ajax 实现级联菜单关键字: ajax 级联菜单自己动手实现的一个Ajax级联菜单，开发平台：Eclipse，数据库：MySQL。

数据库设计如下图所示：1. 前台实现：Html代码1.<%@ page language="java"contentType="text/html; charset=UTF-8"2.pageEncoding="UTF-8"%>3.<%@ page import="java.sql.*,java.io.*"%>4.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">5.<html>6.<head>7.<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">8.<title>Ajax级联菜单实现</title>9.<script language="JavaScript"type="text/javascript">10.57.</script>58.</head>59.<body>60.<%61. //驱动器名62. //数据库用户名和密码63. String userName = "root";64. String userPasswd = "1984428";65. //需要连接的数据库名66. String dbName = "studyajax";67. //表名68. String tableName = "articleType";72. "jdbc:mysql://localhost:3306/" + dbName, userName,73. userPasswd);74. Statement statement = conn.createStatement();75. String sql = "SELECT * FROM " + tableName + " where level=0";76. ResultSet rs = statement.executeQuery(sql);77.%>78.<form name="LevelMenu"><select name="select1"id="select1"79. onchange="getLevel2()">80. <option value="0">请选择一级分类：</option>81. <%82. while (rs.next()) {83. %>84. <option value="<%=rs.getInt(1) %>"><%=rs.getString(2)%></option>85. <%86. }87. rs.close();88. statement.close();89. conn.close();90. %>91.</select><select name="select2"id="select2">92. <option value="0">请选择二级分类</option>93.</select></form>94.95.</body>96.</html>2. 后台代码实现Html代码1.<%@ page language="java"contentType="text/html; charset=UTF-8"2.pageEncoding="UTF-8"%>3.<%@ page import="java.sql.*,java.io.*"%>4.<%5. //数据库用户名和密码6. int id = Integer.parseInt(request.getParameter("id").trim());7. //System.out.println("id:"+id);8. String userName = "root";9. String userPasswd = "1984428";10. //需要连接的数据库名11. String dbName = "studyajax";12. //表名13. String tableName = "articletype";17. "jdbc:mysql://localhost:3306/" + dbName, userName,18. userPasswd);19. Statement statement = conn.createStatement();20. String sql = "SELECT id, name FROM " + tableName21. + " where level=1 and parentId=" + id;22. //System.out.println("sql:"+sql);23. ResultSet rs = statement.executeQuery(sql);24.25. //获取数据结果集26. response.setContentType("text/html; charset=UTF-8");27. response.setHeader("Cache-Control", "no-cache");28. PrintWriter pout = null;29. pout = response.getWriter();30. pout.print("[");31. while (rs.next()) {32. try {33.34. pout.print("'" + (rs.getString("name")) + "',");35. pout.print(rs.getString("id"));36. pout.print(",");37. } catch (Exception e) {38. e.printStackTrace();39. }40. }41. pout.print("0]");42. rs.close();43. statement.close();44. conn.close();45.%>。

JQuery教程实例-Ajax三级省市联动菜单

JQuery教程实例-Ajax三级省市联动菜单1，目录结构这个实例的文件目录结构如下图所示。

其中，ajax.sql是数据库文件，data.php是处理ajax请求的php文件，droplist.js是页面效果处理文件，index.php是显示页面。

在进行下一步之前，我们先将ajax.sql导入到mysql数据库中。

2，index.php 文件主要是在页面刚打开时，显示默认的省的信息。

这里不再赘述，代码如下：1<html>2<head>3<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>4<script type="text/javascript"src="jquery-1.3.2.min.js"></script>5<script type="text/javascript"src="droplist.js"></script>6</head>7<body>8<div align="center"style="margin-top:200px;">9<?php10$conn=mysql_connect("localhost","root","");11mysql_select_db("novel");12mysql_query("set names'utf8'");13$sql="select*from province";14$result=mysql_query($sql);15echo"<from id='droplist'>\n";16echo"<select name='province'>\n";17echo"<option value='-1'selected>请选择省份</option>\n";18while($row=mysql_fetch_row($result)){19echo"<option value='$row[1]'>$row[2]</option>\n";20}21echo"</select>\n";22echo"<select name='selectCity'></select>\n";23echo"<select name='area'></select>\n";24echo"</form>\n";25?>26</div>27</body>28</html>3，droplist.js文件主要是实现了ajax的请求和相应的页面显示效果的处理，比如：其中自定义了ajaxSelectArea()和ajaxSelectCity()两个函数发送ajax请求，这两个函数里面用到的$.ajax()是jquery 框架中ajax的底层实现。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

引言
ＡＪＡＸ全称 “ ＡｓｙｎｃｈｒｏｎｏｕｓＪａｖａＳｃｒｉｐｔＡｎｄＸＭＬ ”
ＡＪＡＸ的优点在于可以进行页面的局部更新、通
过异步方式提升用户体验、节省服务器带宽及网络行效率，获取数据具有更强的目
Ａｂｓｔｒａｃｔ：ＡＪＡＸｃａｎｉｍｐｒｏｖｅｔｈｅｕｓｅｒｅｘｐｅｒｉｅｎｃｅａｎｄｉｎｔｅｒａｃｔｗｉｔｈＷｅｂａｐｐｌｉｃａｔｉｏｎｓｅａｓｉｌｙ．ＴｈｉｓｐａｐｅｒｄｉｓｃｕｓｓｅｓｔｈｅＡＪＡＸＷｅｂａｐｐｌｉｃａｔｉｏｎｍｏｄｅｌａｎｄｉｍｐｌｅｍｅｎｔａｔｉｏｎｐｒｏｃｅｓｓ，ｒｅａｌｉｚｅｓｔｈｅｗｅｂｐａｇｅｃａｓｃａｄｉｎｇ
交互式网页［１］。
法维护“ 历史” 状态，对移动设备的支持不够好［２１。ＡＪＡＸ的核心是ＪａｖａＳｃｉｒｐｔ对象ＸＭＬＨｔｔｐＲｅ — ｑｕｅｓｔ，它是一种支持异步请求的技术，该对象实现了
ＡＪＡＸ可以在服务器和浏览器之间通过ＪａｖａＳｃｒｉｐｔ创建了一个中间层（这个中间层可被称为ＡＪＡＸ引擎），
中图分类号：ＴＰ３９３文献标识码：Ａ
ＲｅａｌｉｚａｔｉｏｎｏｆＷｅｂＰａｇｅＣａｓｃａｄｉｎｇ
Ｄｒｏｐ－ｄｏｗｎＬｉｓｔｓＢａｓｅｄｏｎＡＪＡＸ
ＺＨＡＮＧＬｉ —ｘｉｎ
的性『３１。其不足之处在于会造成相反的用户体验，无
（异步ＪａｖａＳｃｒｉｐｔ和ＸＭＬ），是将名为ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ
的特殊ＪａｖａＳｃｒｉｐｔ对象与ＪａｖａＳｃｉｒｐｔ事件和动态ＨＴＭＬ（ＤＨＴＭＬ，也叫做ＤＯＭ操作）技术结合起来使用的独立于服务器软件的浏览器端编程技术，用于创建
摘
要：ＡＪＡＸ能够提升用户体验，方便地与Ｗｅｂ应用程序进行交互。论述了ＡＪＡＸｗｅｈ应用模型和实现过程，在
ＡＳＰ环境下通过异步通信方式实现了网页下拉列表的多级联动。关键词：ＭＡＸ，ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ，异步通信，级联下拉列表
２ＡＪＡＸ实现过程
开发人员无需知道ＡＪＡＸ引擎是如何将数据发送到服务器的。当ＡＪＡＸ引擎将数据发送到服务器
１ＡＪＡＸＷｅｂ应用模型
ＡＪＡＸ改变了传统的Ｗｅｂ中客户端和服务器“ 请求一等待一请求一等待 ” 的模式，通过使用ＡＪＡＸ应用向服务器发送和接收需要的数据，从而不会产生页面的刷新。ＡＪＡＸ应用通过使用ＳＯＡＰ或其他一些基于ＸＭＬ的ＷｅｂＳｅｒｖｉｃｅ接口，并在客户端采用
・
１Ｏ・（总００１０）
使用ＡＪＡＸ技术实现网页级联下拉列表
２０１４年第１期
文章编号：１００３ — ５８５０（２０１４）０ｌ一００１０ — ０３
使用ＡＪＡＸ技术实现网页级联下拉列表
张立新
（乌鲁木齐职业大学现代教育技术中心，乌鲁木齐８３０００２）
（ＤｅｐａｒｔｍｅｎｔｏｆＭｏｄｅｒｎＥｄｕｃａｔｉｏｎＴｅｃｈｎｏｌｇｙＣｅｎｔｅｒ，ＵｒｕｍｑｉＶｏｃｔａｉｏｎａｌＵｎｉｖｅｒｓｔｙ，Ｗｕｌｕｍｕｑｉ８３０００２，Ｃｈｉｎａ）
ＪａｖａＳｃｉｆｐｔ处理来自服务器的响应，从而减少了服务
使用户可以使用ＪａｖａＳｃｒｉｐｔ向服务器提出请求并处理
响应，而不会影响客户端的信息通信，从而实现了异步通信［２１。ＡＪＡＸＷｅｂ应用模型如图１所示。
ｄｒｏｐ－ｄｏｗｎｌｉｓｔｓｂｙｍｅａｎｓｏｆａｓｙｎｃｈｒｏｎｏｕｓｃｏｍｍｕｎｉｃａｔｉｏｎｉｎＡＳＰｅｎｖｉｒｏｎｍｅｎｔ．
Ｋｅｙｗｏｒｄｓ：ＡＪＡＸ，ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ，ａｓｙｎｃｈｒｏｎｏｕｓｃｏｍｍｕｎｉｃａｔｉｏｎ，ｃａｓｃａｄｉｎｇｄｒｏｐ－ｄｏｗｎｌｉｓｔｓ