基于ajax+struts实现的二级联动
2014-07-13 16:53
459 查看
周末闲来无事，就自己动手写了一个二级联动，主要使用了ajax,后台用struts作为控制器；有了二级联动之后，三级四级自然不在话下。废话少说，直接上源码。源码有点大，放在http://down.51cto.com/data/1470569。，完全免费。。。。
前台页面main.jsp：
main.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>json+struts菜单联动</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var bookfirst=$("#selectcountry");
var booksecond=$("#selectcity");
$("#selectcountry").change(function (){ //一级select变动时，出发ajax请求
$("#selectcity option").remove();//清空，二级select的option
$.ajax({
url: "getcity.action",
dataType : "JSON",
type: "GET",
data:{'city.cityname':$(this).val()},
success: function(data){//请求成果，回调返回json字符串
var citylist=eval(data);
console.log(citylist);
$("#selectcity").append("<option></option>");
$("#selectcity option")[0].text=" 请选择城市";
for(i=0;i<=citylist.length-1;i++){
var j=i+1;
$("#selectcity").append("<option></option>");
$("#selectcity option")[j].text=citylist[i].cityname;
}
}
});
});
});
</script>
</head>
<body>
<center>
<select id="selectcountry" style="width:200px;">
<option>
请选择国家
</option>
<option>
德国
</option>
<option>
加拿大
</option>
<option>
法国
</option>
<option>
日本
</option>
<option>
俄罗斯
</option>
</select>
<select id="selectcity" style="width:200px;margin-left: 50px;">
<option>
请选择城市
</option>
</select>
</center>
</body>
</html>
struts配置文件，struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"
"http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<constant name="struts.devMode" value="true"></constant>
<constant name="struts.custom.i18n.resources" value="city"></constant>
<constant name="struts.i18n.encoding" value="UTF-8"></constant>
<package name="json" extends="json-default">
<action name="getcity" class="com.jxj.action.CityAction" method="getcity">
<result name="SUCCESS" type="json">
<param name="root">citylist</param>
</result>
</action>
</package>
</struts>
处理请求的action:CityAction.java
package com.jxj.action;
import java.util.ArrayList;
import com.jxj.model.City;
import com.jxj.service.CityService;
import com.opensymphony.xwork2.ActionSupport;
public class CityAction extends ActionSupport {
ArrayList<City> citylist;
City city=new City();
public City getCity() {
return city;
}
public void setCity(City city) {
this.city = city;
}
public ArrayList<City> getCitylist() {
return citylist;
}
public void setCitylist(ArrayList<City> citylist) {
this.citylist = citylist;
}
CityService cityservice=new CityService();
public String getcity(){
System.out.println("hhhe");
String parentname=city.getCityname();
System.out.println("parentname:"+parentname);
citylist=new ArrayList<City>();
citylist= cityservice.getcity(parentname);
System.out.println(citylist.size());
return "SUCCESS";
}
}
实体City.java
package com.jxj.model;
public class City {
public int id;
public String cityname;
public String parentname;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getCityname() {
return cityname;
}
public void setCityname(String cityname) {
this.cityname = cityname;
}
public String getParentname() {
return parentname;
}
public void setParentname(String parentname) {
this.parentname = parentname;
}
}
service层CityService.java
package com.jxj.service;
import java.util.ArrayList;
import com.jxj.dao.CityDao;
import com.jxj.daoImpl.CityDaoImpl;
import com.jxj.model.City;
public class CityService {
CityDao citydao=new CityDaoImpl();
public ArrayList<City> getcity(String parentname) {
return citydao.getcity(parentname);
}
}
DAO层CityDao.java
package com.jxj.dao;
import java.util.ArrayList;
import com.jxj.model.City;
public interface CityDao {
ArrayList<City> getcity(String parentname);
}
[b][b][b]DAO实现层CityDaoImpl.java[/b][/b][/b]
package com.jxj.daoImpl;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import com.jxj.dao.CityDao;
import com.jxj.model.City;
import com.jxj.util.DB;
public class CityDaoImpl implements CityDao {
Connection conn=null;
Statement stmt=null;
ResultSet rs=null;
public ArrayList<City> getcity(String parentname) {
ArrayList<City> citylist=new ArrayList<City>();
String sql="select distinct cityname from city where parentname='"+parentname+"'";
System.out.println(sql);
conn=DB.getConn();
stmt=DB.getStatement(conn);
rs=DB.getResultSet(stmt, sql);
try {
while(rs.next()){
City city=new City();
//city.setId(rs.getInt("id"));
city.setCityname(rs.getString("cityname"));
citylist.add(city);
}
} catch (SQLException e) {
e.printStackTrace();
}
return citylist;
}
}
自己封装的JDBC连接工具类：DB.java
package com.jxj.util;
import java.sql.*;
public class DB {
public static Connection getConn() {
Connection conn = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost/demo?user=root&password=root");
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return conn;
}
public static PreparedStatement prepare(Connection conn, String sql) {
PreparedStatement pstmt = null;
try {
if(conn != null) {
pstmt = conn.prepareStatement(sql);
}
} catch (SQLException e) {
e.printStackTrace();
}
return pstmt;
}
public static PreparedStatement prepare(Connection conn, String sql, int autoGenereatedKeys) {
PreparedStatement pstmt = null;
try {
if(conn != null) {
pstmt = conn.prepareStatement(sql, autoGenereatedKeys);
}
} catch (SQLException e) {
e.printStackTrace();
}
return pstmt;
}
public static Statement getStatement(Connection conn) {
Statement stmt = null;
try {
if(conn != null) {
stmt = conn.createStatement();
}
} catch (SQLException e) {
e.printStackTrace();
}
return stmt;
}
public static ResultSet getResultSet(Statement stmt, String sql) {
ResultSet rs = null;
try {
if(stmt != null) {
rs = stmt.executeQuery(sql);
}
} catch (SQLException e) {
e.printStackTrace();
}
return rs;
}
public static void executeUpdate(Statement stmt, String sql) {
try {
if(stmt != null) {
stmt.executeUpdate(sql);
}
} catch (SQLException e) {
e.printStackTrace();
}
}
public static void close(Connection conn) {
try {
if(conn != null) {
conn.close();
conn = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
public static void close(Statement stmt) {
try {
if(stmt != null) {
stmt.close();
stmt = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
public static void close(ResultSet rs) {
try {
if(rs != null) {
rs.close();
rs = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
数据表结构
本文出自 “shuizhongyue” 博客，请务必保留此出处http://shuizhongyue.blog.51cto.com/7439523/1437616
前台页面main.jsp：
main.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>json+struts菜单联动</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var bookfirst=$("#selectcountry");
var booksecond=$("#selectcity");
$("#selectcountry").change(function (){ //一级select变动时，出发ajax请求
$("#selectcity option").remove();//清空，二级select的option
$.ajax({
url: "getcity.action",
dataType : "JSON",
type: "GET",
data:{'city.cityname':$(this).val()},
success: function(data){//请求成果，回调返回json字符串
var citylist=eval(data);
console.log(citylist);
$("#selectcity").append("<option></option>");
$("#selectcity option")[0].text=" 请选择城市";
for(i=0;i<=citylist.length-1;i++){
var j=i+1;
$("#selectcity").append("<option></option>");
$("#selectcity option")[j].text=citylist[i].cityname;
}
}
});
});
});
</script>
</head>
<body>
<center>
<select id="selectcountry" style="width:200px;">
<option>
请选择国家
</option>
<option>
德国
</option>
<option>
加拿大
</option>
<option>
法国
</option>
<option>
日本
</option>
<option>
俄罗斯
</option>
</select>
<select id="selectcity" style="width:200px;margin-left: 50px;">
<option>
请选择城市
</option>
</select>
</center>
</body>
</html>
struts配置文件，struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"
"http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<constant name="struts.devMode" value="true"></constant>
<constant name="struts.custom.i18n.resources" value="city"></constant>
<constant name="struts.i18n.encoding" value="UTF-8"></constant>
<package name="json" extends="json-default">
<action name="getcity" class="com.jxj.action.CityAction" method="getcity">
<result name="SUCCESS" type="json">
<param name="root">citylist</param>
</result>
</action>
</package>
</struts>
处理请求的action:CityAction.java
package com.jxj.action;
import java.util.ArrayList;
import com.jxj.model.City;
import com.jxj.service.CityService;
import com.opensymphony.xwork2.ActionSupport;
public class CityAction extends ActionSupport {
ArrayList<City> citylist;
City city=new City();
public City getCity() {
return city;
}
public void setCity(City city) {
this.city = city;
}
public ArrayList<City> getCitylist() {
return citylist;
}
public void setCitylist(ArrayList<City> citylist) {
this.citylist = citylist;
}
CityService cityservice=new CityService();
public String getcity(){
System.out.println("hhhe");
String parentname=city.getCityname();
System.out.println("parentname:"+parentname);
citylist=new ArrayList<City>();
citylist= cityservice.getcity(parentname);
System.out.println(citylist.size());
return "SUCCESS";
}
}
实体City.java
package com.jxj.model;
public class City {
public int id;
public String cityname;
public String parentname;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getCityname() {
return cityname;
}
public void setCityname(String cityname) {
this.cityname = cityname;
}
public String getParentname() {
return parentname;
}
public void setParentname(String parentname) {
this.parentname = parentname;
}
}
service层CityService.java
package com.jxj.service;
import java.util.ArrayList;
import com.jxj.dao.CityDao;
import com.jxj.daoImpl.CityDaoImpl;
import com.jxj.model.City;
public class CityService {
CityDao citydao=new CityDaoImpl();
public ArrayList<City> getcity(String parentname) {
return citydao.getcity(parentname);
}
}
DAO层CityDao.java
package com.jxj.dao;
import java.util.ArrayList;
import com.jxj.model.City;
public interface CityDao {
ArrayList<City> getcity(String parentname);
}
[b][b][b]DAO实现层CityDaoImpl.java[/b][/b][/b]
package com.jxj.daoImpl;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import com.jxj.dao.CityDao;
import com.jxj.model.City;
import com.jxj.util.DB;
public class CityDaoImpl implements CityDao {
Connection conn=null;
Statement stmt=null;
ResultSet rs=null;
public ArrayList<City> getcity(String parentname) {
ArrayList<City> citylist=new ArrayList<City>();
String sql="select distinct cityname from city where parentname='"+parentname+"'";
System.out.println(sql);
conn=DB.getConn();
stmt=DB.getStatement(conn);
rs=DB.getResultSet(stmt, sql);
try {
while(rs.next()){
City city=new City();
//city.setId(rs.getInt("id"));
city.setCityname(rs.getString("cityname"));
citylist.add(city);
}
} catch (SQLException e) {
e.printStackTrace();
}
return citylist;
}
}
自己封装的JDBC连接工具类：DB.java
package com.jxj.util;
import java.sql.*;
public class DB {
public static Connection getConn() {
Connection conn = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost/demo?user=root&password=root");
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return conn;
}
public static PreparedStatement prepare(Connection conn, String sql) {
PreparedStatement pstmt = null;
try {
if(conn != null) {
pstmt = conn.prepareStatement(sql);
}
} catch (SQLException e) {
e.printStackTrace();
}
return pstmt;
}
public static PreparedStatement prepare(Connection conn, String sql, int autoGenereatedKeys) {
PreparedStatement pstmt = null;
try {
if(conn != null) {
pstmt = conn.prepareStatement(sql, autoGenereatedKeys);
}
} catch (SQLException e) {
e.printStackTrace();
}
return pstmt;
}
public static Statement getStatement(Connection conn) {
Statement stmt = null;
try {
if(conn != null) {
stmt = conn.createStatement();
}
} catch (SQLException e) {
e.printStackTrace();
}
return stmt;
}
public static ResultSet getResultSet(Statement stmt, String sql) {
ResultSet rs = null;
try {
if(stmt != null) {
rs = stmt.executeQuery(sql);
}
} catch (SQLException e) {
e.printStackTrace();
}
return rs;
}
public static void executeUpdate(Statement stmt, String sql) {
try {
if(stmt != null) {
stmt.executeUpdate(sql);
}
} catch (SQLException e) {
e.printStackTrace();
}
}
public static void close(Connection conn) {
try {
if(conn != null) {
conn.close();
conn = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
public static void close(Statement stmt) {
try {
if(stmt != null) {
stmt.close();
stmt = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
public static void close(ResultSet rs) {
try {
if(rs != null) {
rs.close();
rs = null;
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
数据表结构
本文出自 “shuizhongyue” 博客，请务必保留此出处http://shuizhongyue.blog.51cto.com/7439523/1437616
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ajax 多级联动市县区（街道）基于Struts1.x与Strurts2.x实现
- 使用ajax+json+struts实现省份下拉框二级联动
- Ajax实现二级联动下拉框
- Ajax.dll实现无刷新二级联动
- Ajax实现二级联动下拉框
- php ajax实现的二级（多级）联动菜单(2008-10-21,11:36:08)
- 基于Ajax的二级联动下拉菜单
- Ajax实现二级联动下拉框
- Ajax实现省市二级联动示例
- AjaxPro 实现 三级联动菜单时，出现二级select 闪烁问题
- asp.net基于jquery的ajax二级联动
- php ajax实现的二级（多级）联动菜单(2008-10-21,11:36:08)
- 用AjaxPro实现二级联动
- Ajax实现二级联动菜单
- Ajax实现二级联动下拉框!
- Ajax实现二级联动下拉框
- 用AjaxPro实现二级联动
- 用AjaxPro实现二级联动
- 基于AJAX技术实现Struts校验框架
- Ajax + Struts 实现省市联动详解