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 // +------------------------------ ...
随机推荐
- hdu 5533 Dancing Stars on Me（数学，水）
Problem Description The sky was brushed clean by the wind and the stars were cold in a black sky. Wh ...
- HDU2594——Simpsons’ Hidden Talents
Problem Description Homer: Marge, I just figured out a way to discover some of the talents we weren’ ...
- 第十一届GPCT杯大学生程序设计大赛完美闭幕
刚刚过去的周六(6月7号)是今年高考的第一天,同一时候也是GPCT杯大学生程序设计大赛颁奖的日子,以下我们用图文再回想一下本次大赛颁奖的过程. 评审过程的一些花絮<感谢各位评审这些天的付出!&g ...
- 动态代理双剑客--JDK Proxy与CGLIB
背景: 研究过设计模式的同胞们都知道代理模式可以有两种实现方案: 1.接口实现(或继承抽象类) 核心代码片段 ProxySubject-->>doOperation() //dosomet ...
- Elasticsearch的javaAPI之percolator
Elasticsearch的javaAPI之percolator percolator同意一个在index中注冊queries,然后发送包括doc的请求,返回得到在index中注冊过的而且匹配doc的 ...
- ASP.NET中的路径(path) 详解
一 ASP.NET常用路径(path)获取方法与格式对照表 假设我们的网址为http://localhost:1897/ News/Press/Content.aspx?id=1019 跟 Brows ...
- hdu2243考研路茫茫——单词情结
Problem Description 背单词,始终是复习英语的重要环节.在荒废了3年大学生涯后,Lele也终于要开始背单词了. 一天,Lele在某本单词书上看到了一个根据词根来背单词的方法.比如&q ...
- Universal Image Loader_图片异步加载
Universal Image Loader 是一个开源的UI组件程序,该项目的目的是提供一个可重复使用的仪器为异步图像加载,缓存和显示.所以,如果你的程序里需要这个功能的话,那么不妨试试它.他本来是 ...
- Flink Program Guide （6） -- 窗口 （DataStream API编程指导 -- For Java）
窗口(Window) 本文翻译自文档Windows ----------------------------------- Flink使用窗口的概念,根据element的时间戳或者其他指标,将可能无限 ...
- 查看当前运行的SQL语句
WITH sess AS ( SELECT es.session_id, database_name = DB_NAME(er.database_id), er.cpu_time, er.reads, ...