`

jquery+ajax+后台级联

 
阅读更多
$(document).ready(function(){
		 getJsonServicecontent();
	});

	 function getJsonServicecontent(){
	 	$.post   
		(
			'<%=basePath%>/itemgrade/servicestandardAction!queryJsonServicecontent.action?s='+new Date(),
			{    
			  servicelevelid: function(){return $("#servicelevelid").val();}
		   	},    
		    function(data) //回调函数   
		  	{    
		  		$("#servicecontentid").empty();
		  	 	$("#servicecontentid").append($("<option/>").text("请选择").attr("value",""));
		  		$(data).each(function () {
		  			var nametemp=this.name;
		  			if(nametemp.length>4){
		  				nametemp=nametemp.substring(0,4)+"...";
		  			}
                    $("#servicecontentid").append($("<option title="+this.name+" />").text(nametemp).attr("value",this.id));
                    $("#servicecontentid").val('${servicecontentid}');
                });
		  	},   
		  	"json" //返回类型   
		);
	 }

 

<div class="lbsz_content_022" >
              <div class="bddh_content_01" style="padding-left:0px; font-size: 14px;">项目考评管理 &lt; <strong><span style="color:#fa7917;">服务标准管理</span></strong></div>
              <div class="tj_content_211">
                  <table width="744" border="0" cellspacing="0" cellpadding="0" height="50" align="left">
                    <tr>
                      <td width="123" style="color:#333" > 服务标准名称</td>
                      <td width="168">
                       <input name="queryname" value="${queryname}" type="text" class="chaxun_shurukuang" id="queryname" />
                      </td>
                      <td width="78">
                      	服务等级
                      </td>
                      <td width="103">
                      	<select id="servicelevelid" name="servicelevelid" onchange="getJsonServicecontent()">
							<option value="">请选择</option>
							<c:forEach items="${cachemap.servicelevel}" var="servicelevel">
								<option value="${servicelevel.key}" <c:if test='${servicelevel.key==servicelevelid}'>selected="selected"</c:if>>${servicelevel.value}</option>
							</c:forEach>
						</select>
                      </td>
                      <td width="78">
                      	服务内容
                      </td>
                      <td width="103">
                      	<select id="servicecontentid" name="servicecontentid" style="width: 90px;">
						</select>
                      </td>
                      <td width="73"><a href="javascript:void(0)" onclick="queryfun();"><img src="<%=basePath%>images/ny_chaxun.jpg" width="65" height="28" /></a>                      </td>
                      <td width="19"></td>
                      <td width="180" style="color:#333">&nbsp;</td>
                    </tr>
                  </table>
          </div>

 

/**
	 * 根据服务等级查询服务内容
	 * @return
	 */
	public String queryJsonServicecontent(){
		
		HttpServletRequest request = ServletActionContext.getRequest();
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("utf-8");
		String servicelevelid=null;
		if(request.getParameter("servicelevelid")!=null&&!request.getParameter("servicelevelid").equals("")){
			servicelevelid=request.getParameter("servicelevelid");
		}
		String jsonRoad=itemgradeService.queryJsonServicecontent(servicelevelid);
		try {
			PrintWriter out = response.getWriter();
			out.print(jsonRoad);
			out.flush();
			out.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}

 

public String queryJsonServicecontent(String servicelevelid) {
		JSONArray jsonArray = new JSONArray();
		List<Servicecontent> servicecontentList=itemgradeDAO.queryJsonServicecontent(servicelevelid);
		for(Servicecontent s:servicecontentList){
			JSONObject jsonobject = new JSONObject();
			try {
				jsonobject.put("id",s.getCode());
				jsonobject.put("name", s.getName());
				jsonArray.put(jsonobject);
			} catch (JSONException e) {
				e.printStackTrace();
			}
		}
		return jsonArray.toString();
	}

 

public List<Servicecontent> queryJsonServicecontent(String servicelevelid){
		return getSqlSession().selectList("itemgrade.queryJsonServicecontent",servicelevelid);
	}

 

<select id="queryJsonServicecontent" resultType="net.hlj.procomplaints.bean.Servicecontent" parameterType="java.lang.String" >
	    select *
	    from TBDIC_SERVICECONTENT
	    where servicelevelid=#{servicelevelid,jdbcType=VARCHAR}
  	</select>

 

分享到:
评论

相关推荐

    jQuery + Ajax + json 级联

    ### jQuery + Ajax + JSON 级联:深入解析与应用 在现代Web开发中,级联选择器(Cascade Selectors)是一种常见的用户界面设计模式,主要用于处理多层级的数据选择,如国家-省份-城市的选择。本文将深入探讨如何...

    ajax+jQuery+ssh+oracle级联实例

    在IT行业中,构建高效、动态的Web应用是关键任务之一,而"ajax+jQuery+ssh+oracle级联实例"提供了一个具体的实现方案。这个实例涵盖了前端到后端的关键技术,包括异步数据交互(Ajax)、JavaScript库(jQuery)、...

    SSH+Ajax+JSON省市级联效果Spring+Struts+Hibernate+Jquery

    当用户在前端选择省份时,jQuery会发送一个Ajax请求到后台,获取对应省份的城市数据。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在本例中,...

    jQuery+ajax实现无刷新级联菜单示例

    下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 CasMenu.aspx页面: &lt;&#37;@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %&gt; &lt;!DOCTYPE...

    JQuery + Servlet +Json实现下拉框级联

    在实现下拉框级联时,JQuery负责监听用户在第一个下拉框中的选择,然后通过Ajax异步请求向Servlet发送数据,获取相应的级联数据,并更新第二个下拉框的选项。 以下是实现步骤: 1. **创建Servlet**:在Servlet中,...

    JSP+AJAX三级级联及更多级的实现.rar

    在实际开发中,为了使代码更加模块化和易于维护,可能会使用jQuery或者其他JavaScript库来简化AJAX调用和DOM操作。同时,良好的错误处理机制也必不可少,确保在数据请求失败或者解析错误时,能够给用户友好的提示。 ...

    jquery,ajax的几个小例子

    **jQuery和Ajax技术详解** jQuery是一款非常流行的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理以及Ajax交互。在Web开发中,jQuery是实现动态和交互性网页的关键工具。Ajax(Asynchronous ...

    ajax+ssh实现省份城市级联查询

    最后,在前端,利用JavaScript(可能配合jQuery库)编写Ajax请求,动态更新城市下拉框的内容。 总结起来,"Ajax+SSH实现省份城市级联查询"是一个综合运用了多种技术的Web应用示例。Ajax提供异步交互,Spring负责...

    Ajax 实现级联菜单

    虽然Ajax主要关注后台数据的交互,但为了提高用户体验,前端界面的样式和动画也很重要。可以使用CSS来美化级联菜单,或者利用jQuery库简化DOM操作和添加动态效果。 8. **跨域问题**: 如果Ajax请求的URL不在当前...

    ajax_struts_jquery_json级联菜单

    在"ajax_struts_jquery_json级联菜单"的场景中,我们将看到如何利用这四种技术协同工作来创建这样的功能。 首先,Struts框架在后台处理业务逻辑。当用户在前端选择了一个父级菜单项后,Struts Action会接收到这个...

    jQuery实现的多级级联下拉列表

    多级级联下拉列表的工作原理是:当用户在一个下拉列表中做出选择时,该选择会触发一个事件,这个事件会发送一个Ajax请求到服务器,服务器根据请求参数返回相应的下一级选项,然后jQuery将这些新数据填充到下一个下拉...

    ajax实现城市级联

    1. **异步通信**:Ajax的核心是JavaScript的XMLHttpRequest对象,它可以在后台与服务器进行数据交换,而不会影响用户对页面的交互。 2. **局部刷新**:通过Ajax,我们可以只更新页面的一部分,而不是整个页面,提高...

    jquery实现省市区无刷新级联

    在实现无刷新级联的过程中,jQuery的主要作用是监听用户的交互,动态更新DOM元素(如下拉列表),并使用Ajax进行后台数据的异步请求。 1. **基础步骤**: - 创建HTML结构:为省市区分别创建`&lt;select&gt;`元素,通常...

    Ajax级联下拉列表.rar

    在本示例中,"Ajax级联下拉列表.rar"是一个关于如何使用Java技术和Ajax实现级联下拉列表的小功能的压缩包。 级联下拉列表是一种常见的前端交互设计,用户在一个下拉列表中做出选择后,第二个或更多的下拉列表会根据...

    省市区jquery 级联联动

    3. **Ajax请求**:级联联动通常需要后台数据支持。当省份变化时,我们需要通过Ajax向服务器发送请求,获取对应省份的城市列表。jQuery的`.ajax()`或者简化的`.get()`、`.post()`方法可以实现这个功能。例如: ```...

    php+ajax三级直联

    - 异步处理:确保AJAX请求在后台执行,不会阻塞页面的正常渲染。 - 错误处理:设置适当的错误处理机制,处理如网络中断、服务器错误等情况。 - 跨域问题:如果AJAX请求涉及到跨域,需要配置PHP或服务器允许CORS(跨...

    java实现Ajax级联菜单

    在IT行业中,级联菜单(Cascading Menu)是一种常见的用户界面元素,它允许用户通过多级选择来筛选或导航到特定的信息。在本案例中,我们关注的是如何使用Java和Ajax技术来实现一个二级联动的菜单。Ajax,即...

    jQuery城市级联插件

    jQuery城市级联插件的核心是利用jQuery的事件监听和Ajax异步请求。它通过监听用户在省市区选择框中的操作,触发Ajax请求,从服务器获取并填充下一级别的数据。这一过程主要分为以下几个步骤: 1. 初始化:在页面...

Global site tag (gtag.js) - Google Analytics