JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法（让你真正理解ajax）

ajax 下拉列表联动的用法。

ajax的定义：

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

ajax效果的一个例子：

区域为空的时候，维护人情况：

选了一个区域后的情况：（选 舒城县 联带出来的维护人员 小刘）

一、原生态的js实现

XMLHttpRequest 是 AJAX 的基础

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1. var xmlHttp;
2. function createXMLHttpRequest(){
3. if(window.ActiveXObject){//检查浏览器是否支持 XMLHttpRequest 对象
4. xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//不支持 创建
5. }
6. else if(window.XMLHttpRequest){
7. xmlHttp = new XMLHttpRequest();//支持 直接new
8. }
9. }//创建一个xmlHttp 对象
10. function ajaxRequest(url,data,responseResult){//ajaxRequest是将请求发送到后台的function
11. createXMLHttpRequest();//调用 创建一个XMLHttpRequest对象
12. xmlHttp.open("POST",url,true);//规定请求的类型（post）、URL 以及是否异步处理请求（是）
13. xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//类似HTML 表单那样 POST 数据 的http头
14. xmlHttp.onreadystatechange = responseResult;//规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
15. xmlHttp.send(data);//发送数据
16. }

//前台页面的区域select代码：

1. </td>
2. <th>区域：</th>
3. <td>
4. <select style="width: 152px" name="areaId"  id="areaId"  class="select_field" onchange="getWhmans(this.value)">
5. <option value=""  style="color:#999999">-请选择-</option>
6. <c:forEach items="${arealist}" var="area" >
7. <option value="${area.id}">${area.areaName}</option>
8. </c:forEach>
9. </select><font color="red">*</font>
10. </td>

//前台维护人select页面代码：

1. <th>维护人员：</th>
2. <td>
3. <select  id="whman" style="width: 152px" class="select_field" name="whman" >
4. <option value="" style="color:#999999">请选择</option>
5. </select><font color="red">*</font>
6. </td>

//以下是后台的部分代码

1. List<Whperson> customers = factoryBO.getFugBO().getWhperson(area);//根据区域来得到该区域下的维护人信息 即选一个下拉框的区域后联动另一个下拉框带出该区域的维护人信息
2. if (customers != null) {
3. JSONArray jsonArray = new JSONArray();//new一个json数组
4. for (Whperson whman : customers) {
5. JSONObject obj = new JSONObject();
6. obj.put("id", whman.getId());
7. obj.put("name", whman.getName());
8. jsonArray.add(obj);//循环new jsonObject 并把维护人信息 put进去 再add到josnArray里去
9. }
10. out.write(jsonArray.toString());//输出写到页面 即下面的responseText里面
11. } else {
12. out.write("null");
13. }
14. out.flush();
15. out.close();

1. function responseCustomer(){//后台响应完成后执行的function
2. if(xmlHttp.readyState == 4){//4表示请求已完成 ，响应已就绪
3. if(xmlHttp.status == 200){//表示ok
4. var message=xmlHttp.responseText;//为后台返回过来的文本
5. if(message=="null"){//若没有返回任何信息
6. document.getElementById("id").options.length=1;//把id='id'的option下拉框置空
7. return false;
8. }
9. var info2 = eval(message);  //解析一下json字符串
10. document.getElementById("whman").options.length=1;把id='id'的option下拉框先置空
11. $.each(info2, function(i,n){
12. document.getElementById("whman").options.add(new Option(n.gridName,n.gridId));//给下拉框option加上后台返回的值 即增加下拉框选项
13. });
14. }
15. }
16. }
17. function getGridByAreaId(val){//自己写的函数 另一个option onchange事件触发的函数,目的是选这个option后 想要的option能级联
18. var url="village.do?method=getGridByAreaId";//请求后台的url
19. var data="id="+val.value;//传入后台的参数
20. ajaxRequest(url,data,responseCustomer);//实质要调用的ajax的函数
21. }

二、Jquery ajax的实现

1. function getWhmans(obj){
2. var url="bbtj.do?method=getWhman";//请求后台的url
3. $("#whman").empty();//先置空
4. $("#whman").append($('<option value="">-请选择-</option>'));//加上--请选择--选项
5. if($(obj).val()=="")
6. return;//无值，返回
7. url+="&areaId="+$(obj).val();//url参数
8. url+="&t="+(new Date()).valueOf();//url参数
9. $.ajax({
10. url:url,
11. type:'POST',//POST方式
12. dataType:'text',//返回text类型
13. beforeSend:function(xmlHttpRequest,status){
14. },
15. success:function(data,status){
16. var d=eval(data);//解析
17. $(d).each(function(index,entity){
18. $("#whman").append($('<option value="'+entity['id']+'">'+entity['name']+'</option>'));//后台数据加到下拉框
19. });
20. },
21. complete:function(xmlHttpRequest,status){
22. },
23. error:function(){
24. }
25. });
26. }