20151222--Ajax三级无刷新
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="com.hanqi.*" %>
<%@ page import="com.hanqi.dao.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>无刷新三级联动</title>
<script src="js/jquery-2.1.4.min.js"></script>
<%
//实例化 并获取数据
MembersDAL md = new MembersDAL(); //获取一级的数据
ArrayList<Members> al = md.getList(); %> <script type="text/javascript"> var hx = false; function yijChange()
{
//所有浏览器通用实例化代码
if(window.XMLHttpRequest) //非IE IE7版本及以上 都支持非ie形式
{
hx = new XMLHttpRequest(); //如果是非IE浏览器 那么就会实例化
// alert("qqq"); //如果是实例化成功上方的，那么就会输出这句话
}
else if(window.ActiveXObject) //IE
{
try{
hx = new ActiveXObject("Msxml2.XMLHTTP"); //实例化
// alert("qqq2"); //如果实例化成功上方的 那么就会输出这句话
}
catch(e)
{
alert(e);
try
{
hx = new ActiveXObject("Microsoft.XMLHTTP"); //实例化
// alert("qqq3"); //如果实例化成功上方的 那么就会输出这句话
}
catch(e)
{
alert(e);
}
}
} //测试创建XMLHttpRequest是否成功
if(!hx)
{
// alert("创建XMLHttpRequest失败");
}
else
{
// alert("创建XMLHttpRequest成功");
} var yij = document.getElementById("yij");
// 1 设置异步请求的url等信息 &nocache = " + new Date().getTime() 通过不断变化的时间用来进行去缓存操作
hx.open("GET","ajaxTest?parentid=" + yij.value + "&nocache = " + new Date().getTime() , true); //（"请求类型 GET/POST",URL,是否异步 true/false）
// 2 设置回调函数 事件处理器
hx.onreadystatechange = setErj;
// hx.onreadystatechange = getResult; //将回调函数的函数名作为一个事件处理器给 hx.onreadystatechange
//调用请求的发送
hx.send(null); //在需要请求传送参数时设置异步请求时用 post 方式
}
function setErj() //定义一个函数
{
if(hx.readyState == ) //判断是否完成
{
if(hx.status == ) //判断服务器是否完成，正常
{
// alert(hx.responseText);
//刷新二级地区
var rt = hx.responseText;
// 以;为分隔符分割 返回的是一个数组
var array = rt.split(";");
//获取元素 erj 的id并赋值给 erj
var erj = document.getElementById("erj");
//清空erj对应的下拉列表
erj.options.length = ;
//遍历数组
for(var i = ; i < array.length - ;i++)
{
// alert(array[i]);
//将数组中的冒号分割的赋值给array1
var array1 = array[i].split(":"); erj.options.add(new Option(array1[],array1[])); //不是很明白 ？？
} var sanj = document.getElementById("sanj"); sanj.options.length = ; }
else
{
alert("错误状态码 = " + hx.status + "状态文本信息 = " + hx.statusText);
}
}
} function yijChangeJson()
{ $.get("JsonMembers?parentid="+ $("#yij").val()+ "&nocache = " + new Date().getTime(),function(data,status){ // alert(data); //解析JSON
var array = eval("(" + data + ")"); var erj = document.getElementById("erj"); erj.options.length = ; //for 循环遍历数组
for(var i = ; i < array.length;i++)
{ erj.options.add(new Option(array[i].name, array[i].id)); }
//获取 sanj 元素id 并赋值
var sanj = document.getElementById("sanj"); sanj.options.length = ;
});
} function erjChange()
{
// alert($("#erj").val());
// $("#erj").val() 获取id为erj的被选择值
// $("#erj"); //获取元素 var url = "ajaxTest?parentid=" + $("#erj").val() + "&nocache = " + new Date().getTime(); $.get(url,function(data,status){
// alert("Date:" + data +"\nStatus: " +status); //处理数据 var array = data.split(";"); // 分隔 返回的是一个数组 var sanj = document.getElementById("sanj"); sanj.options.length = ; for(var i = ; i < array.length - ;i++)
{
// alert(array[i]); var array1 = array[i].split(":"); sanj.options.add(new Option(array1[],array1[]));
} }); } </script> </head>
<body> 一级地区:
<select id="yij" name="yij" onchange="yijChangeJson()"> <option value="">未选择</option> <% if(al != null)
{
for(Members m : al)
{ out.print("<option value='" + m.getId()+ "'>" + m.getName() + "</option>");
// " + (m.getId() == iYij ? "selected" : "" ) + " //是否选中 }
}
%>
</select>
二级地区： <select id="erj" name="erj" onchange="erjChange()"> <option value="">未选择</option> </select>
三级地区： <select id="sanj" name="sanj" onchange="sanjChange()"> <option value="">未选择</option> </select> </body>
</html>
package com.hanqi; import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import java.sql.*;
import com.hanqi.dao.*;
import java.util.*; /**
* Servlet implementation class ajaxMembers
*/
@WebServlet("/ajaxTest")
public class ajaxTest extends HttpServlet {
private static final long serialVersionUID = 1L; /**
* @see HttpServlet#HttpServlet()
*/
public ajaxTest() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); response.setCharacterEncoding("UTF-8"); String rtn = ""; String pid = request.getParameter("parentid"); if (pid == null || pid.trim().length() == 0 )
{
pid = "-1";
} int iPid = Integer.parseInt(pid); MembersDAL md = new MembersDAL(); ArrayList<Members> al; try
{
al = md.getList(iPid); if (al != null)
{
for (Members u : al)
{
rtn += u.getId() + ":" + u.getName() + ";";
} }
}
catch (Exception e)
{
e.printStackTrace();
} response.getWriter().print(rtn);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} }
20151222--Ajax三级无刷新的更多相关文章
- 使用ajax实现无刷新改变页面内容
如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...
- jsp+ajax实现无刷新
jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...
- window.history.pushState与ajax实现无刷新更新页面url
ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...
- Ajax 实现无刷新分页
Ajax 实现无刷新分页
- Ajax 实现无刷新页面
注意:如本文所用,在前面的文章库的数目可以在源代码中找到,我将指示在文本,其中链路,为了缩短制品的长度,阅读由此带来的不便.乞求被原谅. 评论文章 Ajax 实现无刷新页面.其原理.代码库.代码. 这 ...
- PHP+Ajax+plupload无刷新上传头像代码
很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...
- jQuery+php+ajax实现无刷新上传文件功能
jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...
- Ajax省市区无刷新单表联动查询
方法一: 在很多时候都需要用到无刷新级联查询,本文将以省市区的级联查询作为例子.注:此为单表三级联动 环境:Vistual Studio 2015 .MSSQL 1.首先下载AjaxControlTo ...
- ajax实现无刷新两级联动DropDownList
ajax实现的无刷新三级联动 http://zhangyu028.cnblogs.com/articles/310568.html 本文来自小山blog:http://singlepine.cnblo ...
- 在Thinkphp中使用AJAX实现无刷新分页
在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...
随机推荐
- Android的Activity切换动画特效库SwitchLayout，视图切换动画库，媲美IOS
由于看了IOS上面很多开发者开发的APP的视图界面切换动画体验非常好,这些都是IOS自带的,但是Android的Activity等视图切换动画并没有提供原生的,所以特此写了一个可以媲美IOS视图切换动 ...
- javascript第十三课：Json
js中的json就是字典,Dictionary,就是字典的简化创建方式,json的遍历使用for in的方式,进行遍历 遍历复杂json格式 (如果数组里面存储的是键值对的话,字符串最好用双引号) v ...
- web api (.NET 4.5)
摘自http://blog.csdn.net/fangxing80/article/details/7318289 在刚刚发布的 ASP.NET MVC 4 中,有一个值得注意的新特性——Web Ap ...
- jquery选择器从认识到使用初级篇
1. .class 选择器 ---一种通过元素类别属性查找元素 调用格式: $(".class") ----其中参数表示元素的css类别名称(类选择器)<input cl ...
- ADO.NET DataSet、DataTable、DataRow、DataView的学习
对于一个datatable中的数据进行嵌套查询判断某几列数据是否相同从而确定这条数据是否一样,并确定他重复的次数COUNT1字段. 例如: DataTable dt = new DataTable() ...
- 《think in python》学习-9
think in python think in python -9 案例分析:文字游戏 从文本文件中读取文字 作者提供了一个文本文件words.txt 地址 本章后面案例也会用带该文件中的词组 fi ...
- CSS3 过渡
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 请把鼠标移动到右侧的元素上: 浏览器支持 Internet E ...
- Oracle Dataguard三种保护模式概述(转)
Oracle的DataGuard技术有三种实现模式,分别是max performance.max availability.max protection这三种模式. 以下是来自Oracle文档的摘要信 ...
- c#中的数据类型简介(string)
Sting 字符串 引入话题 字符串是一个引用类型,从string数据类型的代码定义中也可以看出它实现了IEnumerable<char>接口和IEnumerable接口,因此字符串可以看 ...
- VB execl文件后台代码，基础语法
Excel宏与VBA 程序设计实验指导1 实验1 Excel宏与VBA 语法基础 一.实验目的 1.熟练掌握录制宏.执行宏.加载宏的方法: 2．熟练使用Excel VBA编辑环境,掌握VBA的编辑工具 ...