`
lc87624
  • 浏览: 144346 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery + struts2 专业类别、专业名称 二级联动列表

阅读更多
本人新手,欢迎大家批评指正!
本文旨在实现一个二级联动的“专业名称”选择的下拉列表菜单,基本思路如下:

1、将“专业类别”、“专业名称”的数据存入数据库,并在“专业名称”表中设置指向“专业类别”表的外键,使两表之间建立关联;

2、使用struts2标签库中的select的select标签,从数据库中把“专业类别”的list查上来,将select标签中的list属性设为该list;

3、再添加一个空的select控件,以备添加“专业名称”数据;

4、为“专业类别”的select控件的onchange事件设置调用的方法,当类别变换时,调用该方法,使用jQuery的getJSON方法,取得该“专业类别”下的“专业名称”数据(JSON)形式,并将其添加至“专业名称”的select控件。

先谈谈第二部struts2的select标签。
这是该标签的官方API:http://struts.apache.org/2.0.6/struts2-core/apidocs/org/apache/struts2/components/Select.html
在网上搜“struts2 select标签”也能搜到很多文章,我就不冗诉了,直接贴代码。

JSP页面代码:
<s:select name="spec_type" list="spec_type_list" listKey="id" listValue="name" 
headerKey="" headerValue="--专业类别--" theme="simple" onchange="showSpecs()"/>
<select name="spec_name">
	<option value="">--专业名称--</option>
</select>

struts2 action代码:
public String setting_input2(){
	user = userManager.findUser(userid);
        spec_type_list = specTypeManager.all();//将专业类别列表传递给JSP页面
        return "setting2";
}


onchange事件的showSpecs()方法:
<SCRIPT type="text/javascript">
function showSpecs(){
	var type_id = $("select[name='spec_type']").val();
	if(type_id){
		$.getJSON("user_getSpecs",{spec_type:type_id},function(json){
			var spec_list = $("select[name='spec_name']");
			spec_list.empty();
			spec_list.append('<option value="">--专业名称--</option>');
			$.each( json, function(index, entry){
				spec_list.append('<option value="' + entry['id'] + '">' + entry['name'] + '</option>');
			}); 
		});
	}
};
</SCRIPT>


$.getJSON方法中请求的url:“user_getSpecs”所指向的action:
public void getSpecs() throws IOException{
		
	HttpServletResponse response = ServletActionContext.getResponse();      
        response.setCharacterEncoding("UTF-8");      
        int type_id = Integer.parseInt(spec_type);
        List<Spec> spec_list = specManager.specs(type_id);
        StringBuffer json = new StringBuffer();
        json.append("[");
        for(Spec spec : spec_list){
        	json.append("{id:\"" + spec.getId() + "\",name:\"" + spec.getName() + "\"},");
        }
        json.deleteCharAt(json.length()-1);
        json.append("]");
        
        response.getWriter().write(json.toString());
}


最后说一下,怎么取得的数据,个人的方法比较蠢,大家围观下就好了。
我是从某招聘网站源码中COPY得到附件中的文本数据,再利用正则表达式匹配,将所需数据存入数据库,其中的正则表达式很不严格,仅限使用于我所COPY的文本。

读取存储“专业类别”数据的工具类:
public class SpecTypeUtil {

	public void save_spec_types() {
		try {
			BufferedReader br = new BufferedReader(new FileReader("D:\\spec_type.txt"));
			String line = "";
			while((line=br.readLine()) != null) {
				parse(line);
			}
		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	private void parse(String line) {
		Pattern p = Pattern.compile("[\u4e00-\u9fa5]+");
		Matcher m = p.matcher(line);
		SessionFactory factory = new Configuration().configure().buildSessionFactory();
		Transaction tx = null;
		Session session = factory.openSession();
		try {
			while(m.find()) {
				//System.out.println(m.group());
				SpecType type = new SpecType();
				type.setName(m.group());
				session.save(type);
			}
			tx = session.beginTransaction();
			tx.commit();
		}catch (Exception e){
			tx.rollback();
			e.printStackTrace();
		}finally {
			session.close();
		}
	}

	public static void main(String args[]){
		
		SpecTypeUtil util = new SpecTypeUtil();
		util.save_spec_types();
	}
}


读取存储“专业名称”数据的工具类:
public class SpecUtil {

	private int i = 0;

	public void save_spec_types() {

		SessionFactory factory = new Configuration().configure().buildSessionFactory();
		Session session = factory.openSession();
		
		try {
			BufferedReader br = new BufferedReader(new FileReader("D:\\specs.txt"));
			String line = "";
			while((line=br.readLine()) != null) {
				parse(line, session);
			}
		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}finally {
			session.close();
		}
	}

	private void parse(String line, Session session) {
		//Pattern p = Pattern.compile(",\"^[\u4e00-\u9fa5]+$\"");
		Pattern p1 = Pattern.compile("arrMajorItemValue\\[\\d{1,2}\\]");
		Pattern p2 = Pattern.compile("[\u4e00-\u9fa5]+");
		Matcher m1 = p1.matcher(line);
		Matcher m2 = null;

		Transaction tx = null;
		
		try {
			while(m1.find()) {
				i++;
				SpecType type = (SpecType) session.createQuery("FROM SpecType s WHERE s.id=?")
												  .setParameter(0, i).uniqueResult();
				//System.out.print(i + " " + m1.group());
				m2 = p2.matcher(line);
				while(m2.find()) {
					//System.out.print(m2.group() + ",");
					Spec spec = new Spec();
					spec.setName(m2.group());
					spec.setType(type);
					session.save(spec);
				}
				//System.out.println();
				/*SpecType type = new SpecType();
				type.setName(m.group());
				session.save(type);*/
			}
			tx = session.beginTransaction();
			tx.commit();
		}catch (Exception e){
			tx.rollback();
			e.printStackTrace();
		}
	}

	public static void main(String args[]){
		
		SpecUtil util = new SpecUtil();
		util.save_spec_types();
	}
}


效果图:


  • 大小: 8.3 KB
分享到:
评论

相关推荐

    ssh+jquery+ajax二级联动

    在这个"ssh+jquery+ajax二级联动"项目中,开发者可能创建了一个简单的Web应用,实现了基于Ajax的二级联动选择功能。这通常在多级下拉菜单或地区选择等场景中常见,例如:省份选择后,城市列表会动态加载更新。 1. *...

    Struts2+jQuery+ajax+mySql实现省市二级联动

    总的来说,结合Struts2、jQuery、ajax和MySQL,我们可以实现高效、流畅的省市二级联动效果,提供用户友好的Web界面。这四个技术的协同工作展示了现代Web开发中前后端交互的基本模式,对于任何想要学习Web开发的人来...

    struts2二级联动下拉列表

    在给定的“struts2二级联动下拉列表”项目中,开发者利用Struts2、Hibernate和Spring这三大核心技术,创建了一个功能,使得用户在网页上可以选择省份和城市,这两个下拉列表会进行联动,即选择省份后,城市下拉列表...

    三级联动的实例+struts2+hibernate3

    在IT行业中,"三级联动"通常指的是在一个应用中,三个或更多下拉列表框之间存在联动关系,即一个下拉框的选择会影响到下一个下拉框的数据加载。这种技术常见于地域选择、产品分类等场景,提供了良好的用户体验。在这...

    struts2 ajax实现的二级联动

    在Struts2框架中,我们可以利用Ajax来实现二级联动效果,即在一个下拉框的选择改变时,通过Ajax请求动态地更新另一个下拉框的内容。 首先,我们需要了解Struts2的Action类,它是处理用户请求的核心。在实现二级联动...

    联动(struts2+json+jquey)

    这样,用户在第一级选择时,第二级联动选择框会根据用户的选择实时更新其内容,实现了联动效果。 具体步骤如下: 1. 用户在前端页面上操作第一级选择框。 2. jQuery监听到选择事件,通过Ajax向服务器发送请求。 3....

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

    SSH+Ajax+JSON在Web开发中的应用主要集中在构建动态、响应迅速的用户界面,这里我们主要探讨Spring、Struts、Hibernate这三大框架如何与Ajax和JSON技术结合,以实现省市级联选择的效果。 首先,Spring是Java企业级...

    jquery二级联动菜单

    java结合jquery进行异步提交在jsp页面中实现二级联动菜单,该源码在struts+mvc基础上实现的,简单明了。其中的数据库可自行更改,只要相应的更改连库字符串等即可。也可多加几个下拉框将项目扩展为多级联动菜单

    struts2+hibernate+spring实现的二级联动下拉列表.zip

    本项目"struts2+hibernate+spring实现的二级联动下拉列表"展示了如何将这三个框架整合起来,实现一个功能:在用户界面上展示两个下拉列表,当用户选择第一个下拉框的值时,第二个下拉框的内容会根据所选值动态更新。...

    struts2 jquery json ajax 三级联动菜单

    比如,当用户在第一级菜单中做出选择后,通过Ajax调用Struts2的Action,Action返回JSON格式的数据,这些数据随后被jQuery解析并用来填充第二级菜单。 JSON(JavaScript Object Notation)是一种轻量级的数据交换...

    struts二级联动

    总的来说,Struts二级联动是通过Form Bean、Action、JSP和配置文件共同协作实现的,虽然`doubleselect`提供了一种直接的解决方案,但在实际开发中,可能需要结合JavaScript和其他技术来优化用户体验。在处理复杂的...

    Ajax无刷新二级联动

    **Ajax无刷新二级联动**是一种常见的前端交互技术,它通过Ajax(Asynchronous JavaScript and XML)实现页面局部数据的异步更新,使得用户在无需整个页面刷新的情况下,能够完成上下级菜单之间的联动操作。...

    ajax,struts2,json实现省市区三级联动源码含全国省市区数据库

    “ajax,struts2,json实现省市区三级联动源码含全国省市区数据库”这一标题揭示了这个压缩包包含的是一项使用AJAX、Struts2和JSON技术来实现的省市区三级联动功能的源代码。这项技术常用于web应用中,允许用户在选择...

    SSH+jQuery+Ajax框架做的地区选择

    在地区选择中,用户在选择一级或二级地区时,Ajax会向服务器发送请求,获取对应的三级地区列表,并动态更新到页面的下拉列表中,提升了用户体验。 **jQuery** 是一个流行的JavaScript库,它简化了DOM操作、事件处理...

    jquery实现二级联动

    ### 使用jQuery实现二级联动 #### 一、简介 在网页设计与开发中,经常会遇到需要根据用户选择的一个选项动态更新另一个选项的情况,这种交互被称为“级联选择”或“联动选择”。例如,在填写地址信息时,当用户...

    Java二级联动

    在IT行业中,二级联动是一种常见的数据交互和展示方式,尤其在网页设计和前端开发中广泛使用。它通常指的是两个或多个下拉菜单之间存在的联动关系,例如在选择省份后,城市下拉菜单会自动更新为对应省份的城市列表,...

    ajax使用jquery json实现的省市县三级联动经验总结

    在IT领域,特别是Web开发中,实现省、市、县三级联动是常见需求之一,尤其在用户选择地理位置信息时。本文将深入解析如何利用Ajax、jQuery以及JSON来实现这一功能,通过具体代码示例和实践心得,帮助读者理解并掌握...

    ajax+jquery三级联动

    **Ajax+jQuery三级联动详解** 在Web开发中,三级联动是一种常见的交互设计,它通常用于实现下拉框之间的联动效果,比如省份、城市、区县的选择。在这个小demo中,我们将探讨如何使用Ajax和jQuery技术结合Struts2...

    仿google搜索提示效果和二级联动

    本项目“仿google搜索提示效果和省市二级联动”旨在模仿Google搜索引擎的实时搜索建议功能,并结合中国省市的二级联动选择,为用户提供更加智能化的交互体验。下面我们将深入探讨这一项目的实现原理和涉及的技术栈。...

Global site tag (gtag.js) - Google Analytics