Ajax及select级联
cascade.jsp(Test/WebContent/jsp/cascade.jsp):
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>Cascade</title>
<script type="text/javascript" src="/Test/js/utilAjax.js"></script>
</head>
<body>
<span id="spanId1" >
<select id="selectId1" name="selectId1" onchange="sendRequest(this.value,'spanId','selectId',2)">
<option value="">请选择1</option>
<option value="11">动物</option>
<option value="22">植物</option>
</select>
</span> <span id="spanId2">
<!--
<select id="selectId2" name="selectId2" onchange="sendRequest(this.value,'spanId','selectId',3)">
<option value="">请选择2</option>
<option value="21">菜单21</option>
<option value="22">菜单22</option>
<option value="23">菜单23</option>
<option value="24">菜单24</option>
</select>
-->
</span> <span id="spanId3">
<!--
<select id="selectId3" name="selectId3" onchange="sendRequest(this.value,'spanId','selectId',4)">
<option value="">请选择3</option>
<option value="31">菜单31</option>
<option value="32">菜单32</option>
<option value="33">菜单33</option>
<option value="34">菜单34</option>
</select>
-->
</span> <span id="spanId4"></span>
</body>
</html>
(Test/WebContent/js/utilAjax.js):
var XMLHttpReq;
var this_hierarchy;
var this_objectSaId;
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
XMLHttpReq=new XMLHttpRequest();
}
else if(window.ActiveXObject){
try{
XMLHttpReq=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
return XMLHttpReq;
} //url 请求路径
//optionValue 父编号
function sendRequest(optionValue, objectSaId, objectSeId, hierarchy){
this_objectSaId = objectSaId;
this_hierarchy = hierarchy;
var url = "/Test/CascadeServlet";
var myDate = new Date();
var mytime = myDate.toLocaleString( );
/***
var pid="";
try{
if(""!=optionValue){
var id =optionValue.split("#");
if(id.length==0){
return;
}
pid = id[0];
}
}catch(e){
alert(e);
}
if(""==pid){return ;} if(tableName == "cm_city" || tableName == "car_city"){
document.getElementById(inputName).value = parentId;
}else if(tableName == "car_brand"){
if(hierarchy==2){
document.getElementById("carBrandId").value = pid;
}else if(hierarchy==4){
document.getElementById("carSeriesId").value = pid;
}else if(hierarchy==6){
document.getElementById("carModelId").value = pid;
}
}else{
document.getElementById(inputName).value = pid;
}
***/
var thisurl = url + "?optionValue=" + optionValue+ "&objectSaId=" + objectSaId + "&objectSeId=" + objectSeId + "&hierarchy=" + hierarchy + "&datetime=" + mytime;
XMLHttpReq = createXMLHttpRequest();
XMLHttpReq.open("post",thisurl,true);
XMLHttpReq.onreadystatechange=proce;
XMLHttpReq.setRequestHeader("X-Requested-With", "XMLHttpRequst");
XMLHttpReq.send(null);
}
function proce(){
if(XMLHttpReq.readyState==4){
if(XMLHttpReq.status==200){
var xmlReturn = XMLHttpReq.responseText;
var obj = document.getElementById(this_objectSaId+this_hierarchy);
if(""!=xmlReturn){
obj.innerHTML = xmlReturn;
}else{
obj.innerHTML = "";
}
for(var i=this_hierarchy+1; i<9; i++){
if(document.getElementById(this_objectSaId+i)!=null)
document.getElementById(this_objectSaId+i).innerHTML = "";
}
}else{
window.alert("请求失败");
}
}
}
CascadeServlet.java
package com.test.srevlet; import java.io.IOException;
import java.util.ArrayList;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; @WebServlet("/CascadeServlet")
public class CascadeServlet extends HttpServlet {
private static final long serialVersionUID = 1L; public CascadeServlet() {
super();
} protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
response. setCharacterEncoding("UTF-8"); String optionValue = request.getParameter("optionValue");
String objectSaId = request.getParameter("objectSaId");
String objectSeId = request.getParameter("objectSeId");
String hierarchy = request.getParameter("hierarchy"); List<String> objectList = new ArrayList<String>();
StringBuffer returnStr = new StringBuffer(); if(Integer.parseInt(hierarchy)==2 ){
if(optionValue.equals("11")){
objectList.add("cat");
objectList.add("dog");
objectList.add("moneky");
objectList.add("pig");
}
if(optionValue.equals("22")){
objectList.add("玫瑰花");
objectList.add("荷花");
objectList.add("百合花");
objectList.add("鸡冠花");
}
}
if(Integer.parseInt(hierarchy)==3 && !optionValue.equals("")){
for (int i = 0; i <= 4; i++) {
objectList.add("菜单3"+i);
}
} if(objectList.size()>0){
returnStr = new StringBuffer();
returnStr.append("<select name=\"").append(objectSeId+hierarchy).append("\" id=\"").append(objectSeId+hierarchy).append("\"");
returnStr.append(" onchange=\"sendRequest(this.value,'")
.append(objectSaId)
.append("','")
.append(objectSeId)
.append("',")
.append((Integer.parseInt(hierarchy)+1))
.append(")\">");
returnStr.append("<option value=\"\">请选择</option>"); String object = null;
for(int i=0; i<objectList.size(); i++){
object = (String) objectList.get(i);
returnStr.append("<option value=\"").append(object+i).append("\">").append(object).append("</option>");
}
returnStr.append("</select>");
}
if(returnStr!=null){
response.getWriter().write(returnStr.toString());
}
}
}
Ajax及select级联的更多相关文章
- Ajax异步刷新省市级联
省市级联在web前端用户注册使用非常广泛.Ajax异步刷新省市级联.如图:选择不同的区,自动加载相应的街. <TD class=field>位 置:</TD> <TD&g ...
- XML：使用DOM技术解析xML文件中的城市，实现select级联选择
中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...
- js select级联，上面分类，下面是内容
js select级联,上面分类,下面是内容. js级联效果如下: 分类: 请选择 水果 蔬菜 其他 内容: // html和js代码如下: <html> <hea ...
- jQuery实现select级联
使用Html5的数据属性(data-*)Map级联关系,代码如下: <!DOCTYPE html> <html> <head> <title>Selec ...
- jquery ajax生成Select
function DropDownList(url, domId, defaultValue) { /// <summary> /// ajax生成select /// ...
- Jquery+Ajax实现Select动态添加数据
https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...
- Select级联菜单，用Ajax获取Json绑定下拉框（jQuery）
需求类似这样 ↓ ↓ ↓ --> 菜单A发生变化,动态取数据填充下拉菜单B. JS代码如下: <script type="text/javascript"& ...
- jqery对于select级联操作
问题:今天在做一个需求的时候,有一个级联操作也就是选中下拉框的一列就显示对对应的数据 处理:我在做级联的时候在option的列里面绑定click的事件发现这个事件行不通:查资料发现select触发的是 ...
- 使用AJAX(阿贾克斯)创建级联菜单
1. html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
随机推荐
- 《JS权威指南学习总结--8.6 函数闭包》
内容要点: 和其他大多数现代编程一样,JS也采用词法作用域,也就是说,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的. 为了实现这种词法作用域,JS函数对象的内部状 ...
- C#微型网页查看工具
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Dokan官方说明文档
Dokan 库Copyright(c) Hiroki Asakawa http://dokan-dev.net/en 什么是Dokan库================================ ...
- 如何自定义JSR-303标准的validator
在web应用中为了保证数据的有效性而对用户提交的表单数据是必需的,而前台客户端的验证例如javascript并不总是那么安全和可靠,这样我们就需要一个健壮的后台验证框架来处理这个问题.好在java发布 ...
- java增加时间
一个简单的东西. 示例如下: /** * 增加时间 * @param oldDate 老时间 * @param addtime 增加的时间 * @return */ public Date addDa ...
- (转载)CSS中zoom:1的作用
CSS中zoom:1的作用兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:触发IE浏览器的haslayout解决ie下的浮动,margin重叠等一些问题. ...
- ios系统下的QQ浏览器jquert的BUG
$(document).bind("click", function(e){ var $t = $(e.target); alert(333); if($t.is("p& ...
- php随意笔记
local(局部) global(全局)global 关键词用于访问函数内的全局变量.$GLOBALS[index] 的数组中存储了所有的全局变量.这个数组在函数内也可以访问,并能够用于直接更新全局变 ...
- 使用日志记录功能查看PHP扩展的执行过程
了解过PHP内核的同学都知道,PHP的一次请求的生命周期 1.启动Apache后,PHP解释程序也随之启动.PHP调用各个扩展的MINIT方法,从而使这些扩展切换到可用状态 2.当一个页面请求发生时, ...
- url 取出文件扩展名
/**url 取出文件扩展名 *///方法一function getExt1($url) { $arr = parse_url($url); $file = basename($arr[' ...