基于ajax+struts实现的二级联动

周末闲来无事，就自己动手写了一个二级联动，主要使用了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>

<title>json+struts菜单联动</title>

$(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",165);white-space:pre;"> type: "GET",165);white-space:pre;"> data:{'city.cityname':$(this).val()},165);white-space:pre;"> 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>

请选择国家

</option>

德国

加拿大

法国

日本

俄罗斯

</option>

</select>

请选择城市

</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">

<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";

}

@H_404_553@
实体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 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;

public interface CityDao {

ArrayList<City> getcity(String parentname);

DAO实现层CityDaoImpl.java

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.util.DB;

public class CityDaoImpl implements CityDao {

Connection conn=null;

Statement stmt=null;

ResultSet rs=null;

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.setId(rs.getInt("id"));

city.setCityname(rs.getString("cityname"));

citylist.add(city);

} catch (sqlException e) {

e.printStackTrace();

自己封装的JDBC连接工具类：DB.java

package com.jxj.util;

import java.sql.*;

public class DB {

public static Connection getConn() {

Connection conn = null;

Class.forName("com.MysqL.jdbc.Driver");

conn = DriverManager.getConnection("jdbc:MysqL://localhost/demo?user=root&password=root");

} catch (ClassNotFoundException e) {

}

return conn;

public static PreparedStatement prepare(Connection conn,String sql) {

PreparedStatement pstmt = null;

if(conn != null) {

pstmt = conn.prepareStatement(sql);

return pstmt;

sql,int autoGenereatedKeys) {

pstmt = conn.prepareStatement(sql,autoGenereatedKeys);

public static Statement getStatement(Connection conn) {

Statement stmt = null;

stmt = conn.createStatement();

return stmt;

public static ResultSet getResultSet(Statement stmt,255);">ResultSet rs = null;

if(stmt != null) {

rs = stmt.executeQuery(sql);

return rs;

public static void executeUpdate(Statement stmt,255);">stmt.executeUpdate(sql);

public static void close(Connection conn) {

conn.close();

conn = null;

public static void close(Statement stmt) {

stmt.close();

stmt = null;

public static void close(ResultSet rs) {

if(rs != null) {

rs.close();

rs = null;

}

数据表结构

原文链接：https://www.f2er.com/ajax/164687.html

基于ajax+struts实现的二级联动

猜你在找的Ajax相关文章