JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法(让你真正理解ajax)
ajax 下拉列表联动的用法。
ajax的定义:
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
ajax效果的一个例子:
区域为空的时候,维护人情况:
选了一个区域后的情况:(选 舒城县 联带出来的维护人员 小刘)
一、原生态的js实现
XMLHttpRequest 是 AJAX 的基础
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
- var xmlHttp;
- function createXMLHttpRequest(){
- if(window.ActiveXObject){//检查浏览器是否支持 XMLHttpRequest 对象
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//不支持 创建
- }
- else if(window.XMLHttpRequest){
- xmlHttp = new XMLHttpRequest();//支持 直接new
- }
- }//创建一个xmlHttp 对象
- function ajaxRequest(url,data,responseResult){//ajaxRequest是将请求发送到后台的function
- createXMLHttpRequest();//调用 创建一个XMLHttpRequest对象
- xmlHttp.open("POST",url,true);//规定请求的类型(post)、URL 以及是否异步处理请求(是)
- xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//类似HTML 表单那样 POST 数据 的http头
- xmlHttp.onreadystatechange = responseResult;//规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
- xmlHttp.send(data);//发送数据
- }
//前台页面的区域select代码:
- </td>
- <th>区域:</th>
- <td>
- <select style="width: 152px" name="areaId" id="areaId" class="select_field" onchange="getWhmans(this.value)">
- <option value="" style="color:#999999">-请选择-</option>
- <c:forEach items="${arealist}" var="area" >
- <option value="${area.id}">${area.areaName}</option>
- </c:forEach>
- </select><font color="red">*</font>
- </td>
//前台维护人select页面代码:
- <th>维护人员:</th>
- <td>
- <select id="whman" style="width: 152px" class="select_field" name="whman" >
- <option value="" style="color:#999999">请选择</option>
- </select><font color="red">*</font>
- </td>
//以下是后台的部分代码
- List<Whperson> customers = factoryBO.getFugBO().getWhperson(area);//根据区域来得到该区域下的维护人信息 即选一个下拉框的区域后联动另一个下拉框带出该区域的维护人信息
- if (customers != null) {
- JSONArray jsonArray = new JSONArray();//new一个json数组
- for (Whperson whman : customers) {
- JSONObject obj = new JSONObject();
- obj.put("id", whman.getId());
- obj.put("name", whman.getName());
- jsonArray.add(obj);//循环new jsonObject 并把维护人信息 put进去 再add到josnArray里去
- }
- out.write(jsonArray.toString());//输出写到页面 即下面的responseText里面
- } else {
- out.write("null");
- }
- out.flush();
- out.close();
- function responseCustomer(){//后台响应完成后执行的function
- if(xmlHttp.readyState == 4){//4表示请求已完成 ,响应已就绪
- if(xmlHttp.status == 200){//表示ok
- var message=xmlHttp.responseText;//为后台返回过来的文本
- if(message=="null"){//若没有返回任何信息
- document.getElementById("id").options.length=1;//把id='id'的option下拉框置空
- return false;
- }
- var info2 = eval(message); //解析一下json字符串
- document.getElementById("whman").options.length=1;把id='id'的option下拉框先置空
- $.each(info2, function(i,n){
- document.getElementById("whman").options.add(new Option(n.gridName,n.gridId));//给下拉框option加上后台返回的值 即增加下拉框选项
- });
- }
- }
- }
- function getGridByAreaId(val){//自己写的函数 另一个option onchange事件触发的函数,目的是选这个option后 想要的option能级联
- var url="village.do?method=getGridByAreaId";//请求后台的url
- var data="id="+val.value;//传入后台的参数
- ajaxRequest(url,data,responseCustomer);//实质要调用的ajax的函数
- }
二、Jquery ajax的实现
- function getWhmans(obj){
- var url="bbtj.do?method=getWhman";//请求后台的url
- $("#whman").empty();//先置空
- $("#whman").append($('<option value="">-请选择-</option>'));//加上--请选择--选项
- if($(obj).val()=="")
- return;//无值,返回
- url+="&areaId="+$(obj).val();//url参数
- url+="&t="+(new Date()).valueOf();//url参数
- $.ajax({
- url:url,
- type:'POST',//POST方式
- dataType:'text',//返回text类型
- beforeSend:function(xmlHttpRequest,status){
- },
- success:function(data,status){
- var d=eval(data);//解析
- $(d).each(function(index,entity){
- $("#whman").append($('<option value="'+entity['id']+'">'+entity['name']+'</option>'));//后台数据加到下拉框
- });
- },
- complete:function(xmlHttpRequest,status){
- },
- error:function(){
- }
- });
- }
JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法(让你真正理解ajax)的更多相关文章
- JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法(让你真正理解ajax)
ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载 ...
- 如何在tomcat中如何部署java EE项目
如何在tomcat中如何部署java EE项目 1.直接把项目复制到Tomcat安装目录的webapps目录中,这是最简单的一种Tomcat项目部署的方法,也是初学者最常用的方法.2.在tomcat安 ...
- idea 导入 eclipse java ee 项目,并使用 tomcat 7 部署运行
1.导入java ee项目.直接open 2.导入jar依赖 3.修改编译的目录 4.修改tomcat目录 5.tomcat添加目录 请注意classes单词 D:\project\xxxxxx\We ...
- jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...
- [操作系统知识储备,进程相关概念,开启进程的两种方式、 进程Queue介绍]
[操作系统知识储备,进程相关概念,开启进程的两种方式.进程Queue介绍] 操作系统知识回顾 为什么要有操作系统. 程序员无法把所有的硬件操作细节都了解到,管理这些硬件并且加以优化使用是非常繁琐的工作 ...
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
找了这么久资料,总算解决了 感谢博客园:http://www.cnblogs.com/xsht/p/5275081.html 感谢百度:http://zhidao.baidu.com/link?url ...
- maven搭建java ee项目
1.点击File->New->Other,选择maven project 2.选择maven project,点击Next,,而后再点击next,进入如下界面 如图选择最后一个,点击n ...
- 用maven搭建java ee项目
一.开发环境 jdk1.7 tomcat7 eclipse-jee-luna-R-win32 maven2.2.1 二搭建步骤 1.点击File->New->Other,选择maven ...
- java两种动态代理方式的理解
要理解动态代理,不妨先来看看一个静态代理的例子. 一.静态代理 以一个电商项目的例子来说明问题,比如我定义了一个订单的接口IOrder,其中有一个方法时delivery,代码如下. package c ...
随机推荐
- linux系统引导流程
1.固件:硬件和软件结合.加电自检是我们按下电源会检测硬件像cpu.内存.网卡等信息.(从硬件层次检测硬件是否可用) 固件设置实例:设置时间 软件时间和硬件时间: [root@VM_0_12_cent ...
- GDB实战
程序中除了一目了然的Bug之外都需要一定的调试手段来分析到底错在哪.到目前为止我们的调试手段只有一种:根据程序执行时的出错现象假设错误原因,然后在代码中适当的位置插入 printf ,执行程序并分析打 ...
- Linux 入门记录:十六、Linux 多命令协作:管道及重定向
一.多命令协作 在 Linux 系统当中,大多数命令都很简单,很少出现复杂功能的命令,每个命令往往只实现一个或多个很简单的功能.通过将不同功能的命令组合一起使用,可以实现某个复杂功能的. Linux ...
- linux内核启动分析(2)
-----以下内容为从网络上整理所得------ 主要介绍kernel_init线程(函数),这个线程在rest_init函数中被创建,kernel_init函数将完成设备驱动程序的初始化,并调用in ...
- java数组面试题
一维数组可以写成:int[ ]x 或者int x[ ]: 二维数组可以写成:int[ ] y [ ] 或者int y[ ][ ] 或者int [ ][ ]y 面试题如下: 声明数组int[ ...
- maven使用备忘
maven的所有功能本质上都是通过插件来实现的所有的功能.archetype插件就是根据项目类型创建项目的插件.执行archetype:generate命令就会list一系列的项目类型,可以选择一个合 ...
- Leetcode 之Simplify Path(36)
主要看//之间的内容:如果是仍是/,或者是.,则忽略:如果是..,则弹出:否则压入堆栈.最后根据堆栈的内容进行输出. string simplifyPath(string const& pat ...
- MyBatis3-与Spring 4集成
继续使用前一篇的例子http://www.cnblogs.com/EasonJim/p/7052368.html,实际项目中,通常会用Spring来管理DataSource等.充分利用Spring基于 ...
- 阻止父类的create,是无法阻止的
- 微信小程序实战篇-图片的预览、二维码的识别
开篇 今天,做的小程序项目要求,个人中心的客服图片在用户长按时可以识别其二维码,各种翻阅查找,采坑很多,浪费了很多时间,在这里记录下需要注意的点,以及对小程序官方提供的API做一个正确和清晰的认知,希 ...