使用JSON实现简单的城市级联查询

本次采用hibernate+struts+oracle+tomcat+JSON+jQuery实现
一、首先，创建数据库

<!--建立街道表-->
CREATE TABLE street
(
ID NUMBER(4) PRIMARY KEY,
NAME VARCHAR2(50),
district_id NUMBER(4)
);

<!--建立区表-->
CREATE TABLE district
(
ID NUMBER(4) PRIMARY KEY,
NAME VARCHAR2(50)
);

<!--建立外键关系-->
ALTER TABLE street
ADD CONSTRAINT fk_cd FOREIGN KEY (district_id )
REFERENCES district(id);

二、编写struts.xml

<?xml version="1.0" encoding="UTF-8" ?>

<struts>
<!-- 改格式 -->
<constant name="struts.i18n.encoding" value="utf-8"></constant>

<!--
该属性设置Struts 2是否支持动态方法调用，该属性的默认值是true。如果需要关闭动态方法调用，则可设置该属性为false。
-->
<constant name="struts.enable.DynamicMethodInvocation" value="true">
<!--
该属性设置Struts 2应用是否使用开发模式。如果设置该属性为true，则可以在应用出错时显示更多、更友好的出错提示。该属性只接受true和false两个值，该属性的默认值是false。通常，应用在开发阶段，将该属性设置为true，当进入产品发布阶段后，则该属性设置为false。

-->
<constant name="struts.devMode" value="true">
<!-- 为使s:标签和页面融洽,对仗工整 -->
<constant name="struts.ui.theme" value="simple">
<!--默认action-->
<package name="default" namespace="/" extends="struts-default">
<!--展示街道信息-->
<action name="show1" class="org.yuntu.action.ShowDistrictInfoAction">
<result>index.jsp</result>
</action>
</package>
<!--json传输-->
<package name="jsoon-default" extends="json-default">
<!--url为json的action-->
<action name="json" class="org.yuntu.action.JsonAction">
<!--输出类型为json-->
<result type="json">
<!--页面接收后台为result的值JsonObject,将map传输到js -->
<param name="root"/>map
</result>

</action>
</package>
</constant></constant></constant></struts>

三、web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

四、hibernate.cfg.xml文件

<?xml version='1.0' encoding='UTF-8'?>

<!-- Generated by MyEclipse Hibernate Tools.                   -->
<hibernate-configuration>

<session-factory>
<!--方言-->
<property name="dialect">org.hibernate.dialect.Oracle9Dialect</property>
<!--路径-->
<property name="connection.url">jdbc:oracle:thin:@localhost:1521:orcl</property>
<!--数据库用户名-->
<property name="connection.username">java27</property>
<!--密码-->
<property name="connection.password">rooj</property>
<!--驱动-->
<property name="connection.driver_class">oracle.jdbc.driver.OracleDriver</property>
<!--连接的数据库-->
<property name="myeclipse.connection.profile">oracle</property>
<!--展示sql语句-->
<property name="show_sql">true</property>
<!--展示的sql语句换行-->
<property name="format_sql">true</property>

<!--实体类文件引入-->
<mapping class="org.yuntu.entity.Street">
<mapping class="org.yuntu.entity.District">

</mapping></mapping></session-factory>

</hibernate-configuration>

五、实体类entity

1.street

package org.yuntu.entity;

import java.util.HashSet;
import java.util.Set;
import javax.persistence.CascadeType;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.OneToMany;
import javax.persistence.Table;
import org.hibernate.annotations.GenericGenerator;

/**
* Street entity. @author MyEclipse Persistence Tools
*/
@Entity
//name对应数据库street表名，schema对应用户名
@Table(name = "STREET", schema = "JAVA27")
public class Street implements java.io.Serializable {

// Fields
private Integer id;
private District district;
private String name;

// Constructors

/** default constructor */
public Street() {
}

// Property accessors
//increment主键增长策略
@GenericGenerator(name = "generator", strategy = "increment")
@Id
@GeneratedValue(generator = "generator")
//id不能为空，唯一
@Column(name = "ID", unique = true, nullable = false, precision = 4, scale = 0)
public Integer getId() {
return this.id;
}

public void setId(Integer id) {
this.id = id;
}

//多对一
@ManyToOne(fetch = FetchType.LAZY)
@JoinColumn(name = "DISTRICT_ID")
public District getDistrict() {
return this.district;
}

public void setDistrict(District district) {
this.district = district;
}

@Column(name = "NAME", length = 50)
public String getName() {
return this.name;
}

public void setName(String name) {
this.name = name;
}

}

2、district

package org.yuntu.entity;

import java.util.HashSet;
import java.util.Set;

import javax.persistence.CascadeType;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.OneToMany;
import javax.persistence.Table;
import org.hibernate.annotations.GenericGenerator;

/**
* District entity. @author MyEclipse Persistence Tools
*/
@Entity
@Table(name = "DISTRICT", schema = "JAVA27")
public class District implements java.io.Serializable {

// Fields

private Integer id;
private String name;
private Set<street> streets = new HashSet<street>(0);

// Constructors

/** default constructor */
public District() {
}

/** full constructor */
public District(String name, Set<street> streets) {
this.name = name;
this.streets = streets;
}

// Property accessors
@GenericGenerator(name = "generator", strategy = "increment")
@Id
@GeneratedValue(generator = "generator")
@Column(name = "ID", unique = true, nullable = false, precision = 4, scale = 0)
public Integer getId() {
return this.id;
}

public void setId
4000
(Integer id) {
this.id = id;
}

@Column(name = "NAME", length = 50)
public String getName() {
return this.name;
}

public void setName(String name) {
this.name = name;
}

//一对多
@OneToMany(cascade = CascadeType.ALL, fetch = FetchType.LAZY, mappedBy = "district")
public Set<street> getStreets() {
return this.streets;
}

public void setStreets(Set<street> streets) {
this.streets = streets;
}

}

六、dao---Data Access Object

1、区

package org.yuntu.dao;
import java.util.List;
import org.hibernate.cfg.AnnotationConfiguration;
import org.hibernate.cfg.Configuration;
import org.yuntu.entity.District;
public class DistrictDao {
//查找所有区县
public List<district> findAllinfo(){
return new AnnotationConfiguration().configure().buildSessionFactory().openSession()
.createQuery("from District").list();
};
}

2、街道

package org.yuntu.dao;
import java.util.List;
import org.hibernate.cfg.AnnotationConfiguration;
import org.hibernate.cfg.Configuration;
import org.yuntu.entity.Street;
public class StreetDao {
//根据区号查找有哪些街道
public List<street> findSome(Integer district_id){
return new AnnotationConfiguration().configure().buildSessionFactory().openSession().
createQuery("from Street s where s.district.id=:district_id").setInteger("district_id", district_id).list();
}
}

七、action编写

1、获取所有的district

package org.yuntu.action;
import java.util.List;
import org.yuntu.dao.DistrictDao;
import org.yuntu.entity.District;
import com.opensymphony.xwork2.ActionSupport;
public class ShowDistrictInfoAction extends ActionSupport {
//创建List<district>对象，用ognl传输数据
private List<district> districts;
//引用DistrictDao，使用它的方法
private DistrictDao DistrictDao=new DistrictDao();
//重写ActionSupport的默认方法
public String execute() throws Exception {
districts=DistrictDao.findAllinfo();
return SUCCESS;
}
public List<district> getDistricts() {
return districts;
}
public void setDistricts(List<district> districts) {
this.districts = districts;
}
}

2、json数据传输action

package org.yuntu.action;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import net.sf.json.JSONObject;
import org.apache.struts2.ServletActionContext;
import org.yuntu.dao.StreetDao;
import org.yuntu.entity.Street;
import com.opensymphony.xwork2.ActionSupport;
public class JsonAction extends ActionSupport {
//此id用于获取district的id，以此来查找streets
private Integer id;
//创建一个用于传输数据的map集合，json数据就是以键值的形式传递数据
private Map<string,object> map=new HashMap<string,object >();
//用于将结果转换格式
private JSONObject result;

public Map<string,object> getMap() {
return map;
}
public void setMap(Map<string,object> map) {
this.map = map;
}
public JSONObject getResult() {
return result;
}
public void setResult(JSONObject result) {
this.result = result;
}
public Integer getId() {
return id;
}

public void setId(Integer id) {
this.id = id;
}
public String execute() throws Exception {
StreetDao StreetDao=new StreetDao();
List<street> list=null;
if(id!=null&&!id.equals("")){
//查找街道
list=StreetDao.findSome(id);
}else{
list=null;
}
//放入map结合
map.put("list", list);
//result=JSONObject.fromObject(map);
return SUCCESS;
}

}}

八、后台程序已经书写完毕，最后就是简单的web页面了

1、jsp页面

地区：---请选择---
${district.name} 街道：
---请选择---

2、js

$(function(){
<!--通过区选项的change时间，来发送json数据-->
$("#first").change(function(){
<!--获取区的值-->
var firstVal=$("#first").val();
<!--发送区的id-->
$.getJSON('json.action',{"id":firstVal},function(result){
<!--获取街道的节点，为清空数据和添加数据做好准备-->
var second=$("#second");
<!--清空数据-->
second.empty();
<!--拼接-->
$("<option value="">---请选择---</option>").appendTo(second);
<!--遍历拼接-->
$.each(result.list,function(i,item){
$("<option value="'+item.id+'">"+item.name+"</option>").appendTo(second);
})
})
});
<!--测试一下，当street值改变时，可以获取街道的id,还可以书写更下一级的菜单-->
$("#second").change(function(){
var val=$("#second").val();
alert(val);
})
})

九、json数据传输可以实现页面无刷新，且减少了带宽。