默认查出一级分类的第一条数据,和一级分类第一条对应的二级分类条目,当选择一级分类的其他条目时,通过ajax查询出数据库中对应的二级分类条目,返回json格式的数据,并显示在二级分类的下拉列表中。

编程实现:

前端页面jsp:

class="Html" name="code">

产品分类

${data.name}

${data.name}

jsp中的ajax的js部分:

javascript" name="code">

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

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 clist = (List) 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;

}

java ajax级联_jQuery ajax级联二级菜单(转)相关推荐

  1. jquery ajax示例_jQuery AJAX JSP Servlet Java示例

    jquery ajax示例 Ajax in Java JSP Servlet based web applications are very common. Recently I have writt ...

  2. java ajax教程_Jquery ajax基础教程

    jQuery的Ajax带来了无需刷新的web页面革命.这里就详细介绍一下jQuery所涉及到的Ajax操作.(无需特殊说明,均需要有服务器配置,这里本人用的是Tomcat 7) 1.基于请求加载文件数 ...

  3. ajax获取java后台数据_jQuery ajax获取后台数据怎么在前端显示。

    前后端分离以后,前端界面采用ajax与后台数据交互.现在从后台获取到下载文件的集合,怎么在前端一行一行显示,点击某一行可以直接跳转过去下载对应的文件. pageEncoding="UTF-8 ...

  4. java ajax 数组_jQuery ajax - serializeArray() 方法

    定义和用法 serializeArray() 方法通过序列化表单值来创建对象数组(名称和值). 您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身. ...

  5. asp+ajax菜单,AJAX_基于asp+ajax和数据库驱动的二级联动菜单,index.asp 页面代码 复制代码 代 - phpStudy...

    基于asp+ajax和数据库驱动的二级联动菜单 index.asp 页面代码 复制代码 代码如下: set cmd = conn.execute("select bigclassid,big ...

  6. php微信级联菜单,php微信公众号开发之二级菜单

    本文实例为大家分享了php微信公众号二级菜单的具体代码,供大家参考,具体内容如下 核心代码: $postObj = simplexml_load_string($postStr, 'SimpleXML ...

  7. 基于javaweb的宠物商城带后台管理系统(java+ssm+jsp+jquery+ajax+mysql)

    基于javaweb的宠物商城带后台管理系统(java+ssm+jsp+jquery+ajax+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/id ...

  8. 面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序

    面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序 Ajax 为更好的 Web 应用程序铺平了道路 在 Web 应用程序开发中,页面重载循环是最大的一个使用障碍,对于 Java™ ...

  9. java 判断请求为 ajax请求_Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,java 判断请求是不是ajax请求...

    Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 java 判断请求是不是ajax请求,Java判断是否为ajax请求 >>>>>> ...

最新文章

  1. js中==与===的区别
  2. linux下,每次git pull 或者git push都需要输入账号密码的问题以及git remote 的一些基本操作
  3. java基本数据类型_老杜带你学Java【第六课】
  4. 栈、堆、静态存储区和程序的内存布局
  5. str 类常用的函数
  6. ZOJ - 3228 Searching the String(AC自动机求不重复子串出现次数)
  7. VS2008的debug窗口
  8. mvn打包并部署本地tomcat_maven项目自动打包部署到tomcat中
  9. 蓝桥杯 ALGO-88 算法训练 字串统计
  10. 热加载beetl模板
  11. python全栈_010_Python3基本数据类型--元组
  12. android ui 资源下载,【51CTO推荐】Android UI设计相关下载资源
  13. 蓝桥杯进制转换的一题……
  14. CAD中如何插入图框?CAD插入图框方法教程
  15. Unity序列化——Assets序列化
  16. 阿里云服务器实现内网互通
  17. 神经网络模拟化学反应?道翰天琼认知智能机器人平台API接口大脑为您揭秘。
  18. 斗鱼爬取主播相册爬虫函数封装
  19. LeetCode 全站第一,牛逼!
  20. IntelliJ IDEA设置类注释和方法注释模板

热门文章

  1. 水滴石穿之页面遮罩层实现、向window.open()打开的窗口POST数据
  2. 容器编排技术 -- Kubernetes kubectl autoscale 命令详解
  3. javascript Blob数据解析 HUOBI火币api数据解析
  4. Docker Compose配置springboot微服务项目
  5. Hibernate 中出现 xxx表 is not mapped xxx的问题
  6. shell find命令 文件夹查询关键字 查询结果输出新文件
  7. C#LeetCode刷题之#371-两整数之和(Sum of Two Integers)
  8. Weblogic11g安装部署-winserver篇
  9. 有人模仿我的脸,有人模仿我的话
  10. React Native Styling:样式化的组件,Flexbox布局等