java ajax级联_jQuery ajax级联二级菜单(转)
默认查出一级分类的第一条数据,和一级分类第一条对应的二级分类条目,当选择一级分类的其他条目时,通过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级联二级菜单(转)相关推荐
- jquery ajax示例_jQuery AJAX JSP Servlet Java示例
jquery ajax示例 Ajax in Java JSP Servlet based web applications are very common. Recently I have writt ...
- java ajax教程_Jquery ajax基础教程
jQuery的Ajax带来了无需刷新的web页面革命.这里就详细介绍一下jQuery所涉及到的Ajax操作.(无需特殊说明,均需要有服务器配置,这里本人用的是Tomcat 7) 1.基于请求加载文件数 ...
- ajax获取java后台数据_jQuery ajax获取后台数据怎么在前端显示。
前后端分离以后,前端界面采用ajax与后台数据交互.现在从后台获取到下载文件的集合,怎么在前端一行一行显示,点击某一行可以直接跳转过去下载对应的文件. pageEncoding="UTF-8 ...
- java ajax 数组_jQuery ajax - serializeArray() 方法
定义和用法 serializeArray() 方法通过序列化表单值来创建对象数组(名称和值). 您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身. ...
- asp+ajax菜单,AJAX_基于asp+ajax和数据库驱动的二级联动菜单,index.asp 页面代码 复制代码 代 - phpStudy...
基于asp+ajax和数据库驱动的二级联动菜单 index.asp 页面代码 复制代码 代码如下: set cmd = conn.execute("select bigclassid,big ...
- php微信级联菜单,php微信公众号开发之二级菜单
本文实例为大家分享了php微信公众号二级菜单的具体代码,供大家参考,具体内容如下 核心代码: $postObj = simplexml_load_string($postStr, 'SimpleXML ...
- 基于javaweb的宠物商城带后台管理系统(java+ssm+jsp+jquery+ajax+mysql)
基于javaweb的宠物商城带后台管理系统(java+ssm+jsp+jquery+ajax+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/id ...
- 面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序
面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序 Ajax 为更好的 Web 应用程序铺平了道路 在 Web 应用程序开发中,页面重载循环是最大的一个使用障碍,对于 Java™ ...
- java 判断请求为 ajax请求_Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,java 判断请求是不是ajax请求...
Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 java 判断请求是不是ajax请求,Java判断是否为ajax请求 >>>>>> ...
最新文章
- js中==与===的区别
- linux下,每次git pull 或者git push都需要输入账号密码的问题以及git remote 的一些基本操作
- java基本数据类型_老杜带你学Java【第六课】
- 栈、堆、静态存储区和程序的内存布局
- str 类常用的函数
- ZOJ - 3228 Searching the String(AC自动机求不重复子串出现次数)
- VS2008的debug窗口
- mvn打包并部署本地tomcat_maven项目自动打包部署到tomcat中
- 蓝桥杯 ALGO-88 算法训练 字串统计
- 热加载beetl模板
- python全栈_010_Python3基本数据类型--元组
- android ui 资源下载,【51CTO推荐】Android UI设计相关下载资源
- 蓝桥杯进制转换的一题……
- CAD中如何插入图框?CAD插入图框方法教程
- Unity序列化——Assets序列化
- 阿里云服务器实现内网互通
- 神经网络模拟化学反应?道翰天琼认知智能机器人平台API接口大脑为您揭秘。
- 斗鱼爬取主播相册爬虫函数封装
- LeetCode 全站第一,牛逼!
- IntelliJ IDEA设置类注释和方法注释模板
热门文章
- 水滴石穿之页面遮罩层实现、向window.open()打开的窗口POST数据
- 容器编排技术 -- Kubernetes kubectl autoscale 命令详解
- javascript Blob数据解析 HUOBI火币api数据解析
- Docker Compose配置springboot微服务项目
- Hibernate 中出现 xxx表 is not mapped xxx的问题
- shell find命令 文件夹查询关键字 查询结果输出新文件
- C#LeetCode刷题之#371-两整数之和(Sum of Two Integers)
- Weblogic11g安装部署-winserver篇
- 有人模仿我的脸,有人模仿我的话
- React Native Styling:样式化的组件,Flexbox布局等