需求:
产品营销型网站
上传产品时,有产品种类的选择项,产品种类有一级分类和二级分类,
点击一级分类时,相应显示二级分类的条目。
功能实现:
默认查出一级分类的第一条数据,和一级分类第一条对应的二级分类条目,当选择一级分类的其他条目时,通过ajax查询出数据库中对应的二级分类条目,返回json格式的数据,并显示在二级分类的下拉列表中。
编程实现:
前端页面jsp:
<form method="post" modelAttribute="_pro" name="form1" id="form1" action="${ctx}/product-manage/add-product"> <table width="100%" border="1" align="center" cellpadding="6" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#F7F7F7"> <tr> <td width="15%" bgcolor="#F7F7F7"><div align="center">产品分类</div></td> <td bgcolor="#F7F7F7"> <select name="pid" id="pid" onchange="getData()"> <c:forEach var="data" items="${clist}"> <option value="${data.id}">${data.name}</option> </c:forEach> </select> <select name="categoryId" id="categoryId"> <c:forEach var="data" items="${slist}"> <option value="${data.id}">${data.name}</option> </c:forEach> </select> </td> </tr> </form>
jsp中的ajax的js部分:
<script src="${ctx}/js/jquery-1.7.1.min.js"></script> function getData() { var pid = $("#pid").val(); $.ajax({ url:"${ctx}/product-manage/sub-category?"+Math.random(), data:{pid : pid}, type : "post", cache : false, dataType : "json", error:function(){ alert("error occured!!!"); }, success:function(data){ if(data!="0"){ var categoryId = document.getElementById('categoryId'); //清空数组 categoryId.length = 0; for(var i=0;i<data.length;i++){ var xValue=data[i].id; var xText=data[i].name; var option=new Option(xText,xValue); categoryId.add(option); } }else{ var categoryId = document.getElementById('categoryId'); categoryId.length = 0; } } }); }
后端的json处理代码:
/** * 得到产品种类对应的子种类 : json数据 * @throws IOException */ @SuppressWarnings("unchecked") @RequestMapping(value="sub-category") public String getSubCategory(HttpServletRequest request, HttpServletResponse response) throws IOException{ response.setContentType("text/xml;charset=UTF-8"); PrintWriter out = null; try { out = response.getWriter(); } catch (IOException e) { e.printStackTrace(); } String pid = request.getParameter("pid"); String sql = "select id,name from product_category where pid=?"; List<ProductCategory> clist = (List<ProductCategory>) DBHandler.queryBeanList(sql, ProductCategory.class, pid); JSONArray array = new JSONArray(); JSONObject member = null; try { for (ProductCategory p:clist) { member = new JSONObject(); member.put("name", p.getName()); member.put("id", p.getId()); array.put(member); } } catch (JSONException e) { e.printStackTrace(); } out.print(array.toString()); return null; }
相关推荐
用Ajax实现的一个级联菜单,下拉菜单是从数据库中取数据的。
jquery+ajax+jsp+servlet实现二级级联菜单,这是自己在实践中总结的一点小经验,代码从前台JAP到Servlet以及后台数据库设计,测试数据完整的流程,相信有点java基础的同仁们都可以看得明白
引用场景: 国家省市级联菜单、任何二级级联菜单、三级菜单、四级菜单、五.... 使用范例:详细参阅District.Selector.js文件 以国家地理信息为例: $(function () { var District1 = new District("userDistrict",{...
利用了jquery的ajax实现。用到的包有:json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json.js jquery.js jsp页面的代码: 代码如下: <%@ page contentType=”text/html; charset=gbk”%> <%@ taglib ...
主要介绍了jQuery ajax+PHP实现的级联下拉列表框功能,涉及php结合jQuery的$.get方法动态交互实现省市二级联动下拉列表框相关操作技巧,需要的朋友可以参考下
本文介绍使用jQuery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级、三级或多级联动也可以按照此方法完成。文章中涉及到的数据表为City,为方便管理。 设计此表如下 ID:自增长字段 City_Name:城市名称 ...
本文实例讲述了jquery无限级联下拉菜单代码以及jquery无限级联下拉菜单实现思路。分享给大家供大家参考。具体如下: 最终效果图: 因为是级联,所以数据必须是树型结构的,这里的测试数据如下: 看下效果图: 1、...
利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动 下面是我的 js文件原码: 代码如下: var mail={ //初始化 init:{ //初始化数据 initdata:{ did:”, ttitle:”, sendpassword:”, description:” }, /...
本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果。 HTML 首先在head中载入jquery库和cityselect插件。 [removed][removed] [removed][removed] 接下来,我们在#city中...
先做出三个下拉菜单—-根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理。 2、用到的数据库表:Chinastates表 规律:根据国家级(中国)的areacode查询省级(如:北京) ; 根据省级的areacode查询...
05 js练习之二级联动 06 jquery以及jquery对象介绍 07 jquery选择器 08 jquery的查找筛选器 09 jquery练习之左侧菜单 第44章 01 jquery属性操作之html,text,val方法 02 jquery循环方法和attr,prop方法 03 jquery...
├─(21) 05 python s3 day43 js练习之二级联动.avi ├─(22) 06 python s3 day43 jquery以及jquery对象介绍.avi ├─(23) 07 python s3 day43 jquery选择器.avi ├─(24) 08 python s3 day43 jquery的查找筛选器....
\contentsline {chapter}{Contents}{2}{section*.1} {1}Java基础}{17}{chapter.1} {1.1}基本语法}{17}{section.1.1} {1.2}数字表达方式}{17}{section.1.2} {1.3}补码}{19}{section.1.3} {1.3.1}总结}{23}{...