`
xi5566
  • 浏览: 151812 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

AJAX 做3级连动

阅读更多
首先我门看ACTION代码

这里暂时只看show
/*
 * Generated by MyEclipse Struts
 * Template path: templates/java/JavaClass.vtl
 */
package com.baidu.struts.action;

import java.io.IOException;
import java.util.HashMap;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;
import org.json.JSONArray;
import org.json.JSONObject;

import com.baidu.dao.DAO;
import com.baidu.struts.form.TestForm;

/** 
 * MyEclipse Struts
 * Creation date: 04-21-2008
 * 
 * XDoclet definition:
 * @struts.action path="/test" name="testForm" input="/form/test.jsp" scope="request" validate="true"
 */
public class TestAction extends DispatchAction {

	
	public ActionForward show(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {
		TestForm testForm = (TestForm) form;
		DAO dao=new DAO();
		request.setAttribute("gs",dao.findByGs());
//		request.setAttribute("bm", dao.findByBm());
//		request.setAttribute("emp", dao.findByEmp());
		return mapping.findForward("index");
	}
	
	
	public ActionForward ajax(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {
		TestForm testForm = (TestForm) form;
		response.setHeader("Charset","UTF-8");
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/xml");
		String selectValue = request.getParameter("selectValue");
		Integer id=Integer.parseInt(selectValue);
		DAO dao=new DAO();
		List list=dao.findByBm(id);
		JSONArray jsonArray = new JSONArray();
		for(int i = 0; i < list.size(); i++ ){
			HashMap map = (HashMap)list.get(i);
			JSONObject jsonObject = new JSONObject(map);
			jsonArray.add(jsonObject);
		}
		try {
			response.getWriter().print(jsonArray);
			response.getWriter().flush();
			response.getWriter().close();
		} catch (IOException e) {
		}
	
		return null;
	}
	
	
	
	
	
	public ActionForward ajax1(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {
		TestForm testForm = (TestForm) form;
		response.setHeader("Charset","UTF-8");
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/xml");
		String selectValue = request.getParameter("selectValue");
		Integer id=Integer.parseInt(selectValue);
		System.out.println(id);
		DAO dao=new DAO();
		List list=dao.findByEmp(id);
		JSONArray jsonArray = new JSONArray();
		for(int i = 0; i < list.size(); i++ ){
			HashMap map = (HashMap)list.get(i);
			JSONObject jsonObject = new JSONObject(map);
			jsonArray.add(jsonObject);
		}
		try {
			response.getWriter().print(jsonArray);
			response.getWriter().flush();
			response.getWriter().close();
		} catch (IOException e) {
		}
	
		return null;
	}
	


	public ActionForward show2(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) {
		TestForm testForm = (TestForm) form;
		return null;
	}

}

OK 我门在看来JSP
<%@ page language="java" pageEncoding="gbk"%>
<jsp:directive.page import="java.util.List"/>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

<script type="text/javascript"
	src="<%=request.getContextPath()%>/prototype.js"></script>
<script language="javascript">

	function sendRequest(selectValue){								
		var pars = 'selectValue=' + selectValue;			
		myAjax = new Ajax.Request(
								'<%=request.getContextPath()%>/test.do?method=ajax',
								{method: 'get', requestHeaders:["If-Modified-Since","0"], parameters: pars, onComplete: showResponse }
				  );
	}		
	
	
	function showResponse(response) {
		var json = eval('('+response.responseText+')');
		//alert(json)
		var selectObj = document.getElementById("dealersId");
		selectObj.options.length = 1;    		
		for(var i=0; i<json.length; i++){    			
			selectObj[i+1] = new Option(json[i].name,json[i].id);			               
		}  
	}
	
	
	function sendRequest1(selectValue){								
		var pars = 'selectValue=' + selectValue;			
		myAjax = new Ajax.Request(
								'<%=request.getContextPath()%>/test.do?method=ajax1',
								{method: 'get', requestHeaders:["If-Modified-Since","0"], parameters: pars, onComplete: showResponse1 }
				  );
	}		
	

		function showResponse1(response) {
		var json = eval('('+response.responseText+')');
		//alert(json)
		var selectObj = document.getElementById("dealersId1");
		selectObj.options.length = 1;    		
		for(var i=0; i<json.length; i++){    			
			selectObj[i+1] = new Option(json[i].name,json[i].id);			               
		}  
	}
	

	
	
	
</script>
 <BODY> 
	<html:form action="/test.do?method=show">
		<html:select property="id" onchange="javascript:sendRequest(this.value);act='';">
			<html:option value="">请选择</html:option>
			<html:options collection="gs" property="id" labelProperty="name"/>
		</html:select>
		<br>
			<html:select property="pid" styleId="dealersId" onchange="javascript:sendRequest1(this.value);act='';">
				<html:option value="">网点名称</html:option>
				</html:select>
		</br>
			<html:select property="pid1" styleId="dealersId1">
				<html:option value="">网点名称</html:option>
			</html:select>
		</html:form>
			
		
			
			
</BODY>



JS是工具类太长了帖不上来
大个包传上来把 需要的朋友可以下
prototype.rar
分享到:
评论

相关推荐

    Ajax四级联动源代码

    在本资源"Ajax四级联动源代码"中,我们探讨的是一种利用Ajax实现的城市选择的四级联动效果,这在很多网站的地址输入、筛选功能中常见。四级联动通常指的是省-市-区-街道的逐级下拉菜单,用户选择一个层级后,下一...

    Ajax JavaWeb JS 三级联动

    在Web开发中,"Ajax JavaWeb JS 三级联动"是一个常见的功能需求,它涉及到前端JavaScript技术、后端JavaWeb服务以及Ajax异步通信。这个功能主要用于创建交互性强的下拉菜单,通常用于地区选择、商品分类等场景,用户...

    ajax的三级联动源码

    **Ajax的三级联动源码详解** 在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。在这个"ajax的三级...

    ajax 省市二级联动

    在网页开发中,"AJAX 省市二级联动"是一种常见的交互设计,它使得用户在选择省份时,城市选项能够自动更新而无需重新加载整个页面。这种技术大大提升了用户体验,尤其是在处理大量的地理数据或者需要实时更新信息的...

    Ajax城市四级联动

    **Ajax城市四级联动详解** 在Web开发中,为了提供用户友好的交互体验,常常需要实现类似城市选择的级联下拉菜单。这种功能通常被称为“四级联动”,即省、市、区、街道四个级别的选择,当用户在某一级别选择后,下...

    AJAX-N级联动

    N级联动是AJAX在特定场景下的应用,通常指的是在多级下拉菜单或者多层表格中,选择某一选项时,其他相关联的下拉菜单或表格会根据选择自动更新。 在N级联动中,一级菜单的选择会影响到二级菜单的内容,二级菜单的...

    smarty ajax 下拉框二级联动

    Smarty + Ajax 下拉菜单二级联动: 1. 建立数据库ajaxtest (使用utf8) 2. 进行conn.php 修改root密码 3. 导入表 product.sql --- 主产品 4. 导入表 producttest.sql -- 二级产品 弄好后运行:...

    ajax实现3级联动例子(vs2003带数据库)

    **Ajax 实现三级联动在 VS2003 中的应用** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新...

    ajax三级联动,三级联动,联动,ajax,无刷新三级联动

    这里的“三级联动”是指在网页中,三个下拉菜单或者选择框之间通过Ajax进行数据同步和更新,用户在一级菜单中选择一个选项后,二级菜单会根据一级的选择自动加载相关数据,同样,选择二级菜单后,三级菜单也会随之...

    php+ajax二级联动

    在IT行业中,"php+ajax 二级联动"是一种常见的前端交互技术,主要用于构建动态、无刷新的用户界面。这种技术可以提升用户体验,因为用户在选择一个选项时,无需等待整个页面刷新,就能实时看到下级选项的变化。接...

    Ajax实现三级联动

    在网页开发中,"Ajax 实现三级联动"是一种常见的交互设计,主要用于地址选择、分类筛选等场景。这里的“联动”指的是当用户在一个下拉框中选择一个选项时,其他关联的下拉框会自动更新其内容,以反映出与之前选择...

    Ajax省市三级联动

    在网页开发中,"Ajax省市三级联动"是一个常见的功能需求,尤其在地址选择、订单填写等场景中。这个功能主要用于实现省、市、区(县)的联动选择,即用户在选择一个省份后,市的选择项会自动更新,再选择一个市,区县...

    Ajax省市二级联动

    在网页开发中,"Ajax省市二级联动"是一个常见的功能,用于实现用户在选择省份时,城市下拉框自动更新对应省内的城市数据。这个功能提高了用户体验,减少了不必要的页面刷新,使得用户能够在不离开当前页面的情况下...

    ajax 三级联动

    **Ajax 三级联动详解** 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛应用于创建动态、交互性强的网页应用。它允许在不刷新整个页面的情况下,通过后台与服务器进行数据交换,提升了用户体验。...

    js和ajax实现三级联动.zip

    在这个“js和ajax实现三级联动.zip”压缩包中,包含了一个实现三级联动(省市区选择)的示例。这种功能常用于地址输入或者地理定位等场景,为用户提供了流畅的导航体验。 首先,我们来理解一下什么是三级联动。在...

    ajax + xml 省市县区四级联动

    在网页开发中,"ajax + xml 省市县区四级联动"是一种常见且实用的技术应用场景,主要用于实现用户在选择省份时,下拉菜单自动更新显示对应的城市、区县,形成四级联动的效果。这一功能可以极大地提升用户体验,减少...

    ajax实现无限级联动

    1. **前端布局**:创建HTML结构,为每级联动元素分配ID或Class,以便于JavaScript操作。 2. **JavaScript处理**:使用JavaScript监听用户的选择事件,当用户选择某一选项时,触发Ajax请求。 3. **Ajax请求**:使用...

    Jquery各种插件和JQuery Ajax三级联动地区下拉框 & 非Ajax实现三级联动

    **jQuery 插件和 AJAX 三级联动地区下拉框** 在网页开发中,尤其是在处理表单数据时,经常需要实现一种功能,即“三级联动地区下拉框”。这个功能允许用户通过选择省份、城市和区县,来精确地指定一个地理位置。在...

    Ajax实现的三级联动下拉菜单

    struts2+jsp+json+javascript实现的三级下拉菜单,没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp

    ajax四级联动菜单

    【Ajax四级联动菜单】是一种基于Ajax技术实现的动态下拉菜单功能,通常用于网页上的地区选择,例如国家、省份、城市、区县等。在这个示例中,它使用了Oracle数据库存储四级菜单的数据,并结合JSP(JavaServer Pages...

Global site tag (gtag.js) - Google Analytics