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 // +------------------------------ ...
随机推荐
- JavaScript判断图片是否加载完成
一.load事件 <!DOCTYPE HTML><html> <head> <meta charset="utf-8"> ...
- jps无法获取到tomcat(java)进程
一.问题描述: Ubuntu 10.10版本,同个JDK 1.6版本,启动tomcat后,使用jps无法获取本机Java进程. 二.jps工作原理: 1. java进程启动时,若没有指定 -Djava ...
- XPath在asp.net中查询XML
.NET Framework 2.0中可以使用System.Xml.XPath命名空间下的类对XML文档进行基于路径的查询,在查询过程中需要构造类似SQL的查询字符串,该字符串遵循XPath语法.它由 ...
- ASP.NET程序代码优化的七个方面
ASP.NET程序性能优化的七个方面 一.数据库操作 1.用完马上关闭数据库连接 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比 ...
- 观察者模式：猫叫鼠跑人醒(C#)
本着菜鸟先飞的想法,决定把平时遇到的知识点记录下来,一来是加深理解,二来是方便以后自己查阅.当您看到我这篇文章的时候,觉得代码有哪里不足的地方,请多指教,谢谢.(命名不规范是为了加深自己的理解,多多见 ...
- JQuery Ajax Options
参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 ...
- javaweb一周总结（菜鸟）
我的试用期开始了. 这是我的第一篇博客,这也是我作为java工程师的第六天,主要是为了记录一周内出现的问题以及一些工作上的解答,吐槽一句工作的确和想的不一样之后直接记录下吧. 由于拥有工作平台看不到底 ...
- 一个简单的shell脚本
一个简单的shell脚本 一个简单的shell脚本 编写 假设我想知道目前系统上有多少人登录,使用who命令可以告诉你现在系统有谁登录: 1.[KANO@kelvin ~]$ who2.KANO tt ...
- 动态规划-Burst Balloons
Burst Balloons Given n balloons, indexed from 0 to n-1. Each balloon is painted with a number on it ...
- oc block基本使用
// // main.m // block基本使用 // // Created by Ymmmsick on 15/7/21. // Copyright (c) 2015年 Ymmmsick. All ...