1. 简介
JSP结合JavaScript实现数据联动,很多时候我们都要在用户作出选择的时候才会动态列出数据,这时候就必须使用JavaScript来实现数据联动,但是单纯的使用JavaScript而不与数据库连接,则意义不大,这里我演示一个关于省市联动的例子,聊以说明
2. JSP代码
<%@
page
language
=
"java"
import
=
"java.util.*"
pageEncoding
=
"GBK"
%>
<%@
taglib
uri
=
"http://java.sun.com/jsp/jstl/core"
prefix
=
"c"
%>
<%@
taglib
uri
=
"http://java.sun.com/jsp/jstl/sql"
prefix
=
"sql"
%>
<!
DOCTYPE
HTML
PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
>
<
html
>
<
head
>
<
title
>
测试数据联动
</
title
>
<
script
type
=
"text/javascript"
>
var
pid;
//
用来保存省份
ID
function
join()
{
for
(i=0; i<document.myform.pid.length; i++)
{
if
(document.myform.pid[i].selected ==
true
)
{
pid = document.myform.pid[i].value;
}
}
window.location.href =
"index.jsp?pid="
+ pid;
}
</
script
>
</
head
>
<
body
>
<
sql:setDataSource
var
=
"db"
user
=
"liky"
password
=
"redhat"
driver
=
"com.microsoft.sqlserver.jdbc.SQLServerDriver"
url
=
"jdbc:sqlserver://localhost:1433;databaseName=csu"
/>
<!--
这里查询省份
-->
<
sql:transaction
dataSource
=
"${db}">
<
sql:query
var
=
"qp"
sql
=
"select pid,name from province order by pid"
/>
</
sql:transaction
>
<!--
这里根据省份的
ID
查询城市
-->
<
sql:transaction
dataSource
=
"${db}">
<
sql:query
var
=
"qc"
sql
=
"select cid, name from city where pid = ? order by cid"
>
<
c:if
test
=
"${empty param.pid}">
<
sql:param
value
=
"1"
/>
</
c:if
>
<
c:if
test
=
"${not empty param.pid}">
<
sql:param
value
=
"${param.pid}"/>
</
c:if
>
</
sql:query
>
</
sql:transaction
>
<
center
>
<
form
name
=
"myform"
action
=
"ok.jsp"
method
=
"get"
>
<
table
border
=
"1"
>
<
tr
>
<
td
>
省份
</
td
>
<
td
><
select
name
=
"pid"
onChange
=
"join()"
>
<
c:forEach
items
=
"${qp.rows}"var="province">
<
c:if
test
=
"${not empty province}">
<
c:if
test
=
"${param.pid == province.pid}">
<
option
value
=
"${province.pid}"selected = "selected">
${province.name}
</
option
>
</
c:if
>
<
c:if
test
=
"${param.pid != province.pid}">
<
option
value
=
"${province.pid}">
${province.name}
</
option
>
</
c:if
>
</
c:if
>
<
c:if
test
=
"${empty province or province.pid < 1}">
<
option
value
=
"0"
>
请选择
</
option
>
</
c:if
>
</
c:forEach
>
</
select
></
td
>
</
tr
>
<
tr
>
<
td
>
城市
</
td
>
<
td
><
select
name
=
"cid"
>
<
c:forEach
items
=
"${qc.rows}"var="city">
<
option
value
=
"${city.cid}">
${city.name}
</
option
>
</
c:forEach
>
</
select
></
td
>
</
tr
>
<
tr
>
<
td
><
input
type
=
"submit"
value
=
"
提交
"
></
td
>
<
td
><
input
type
=
"reset"
value
=
"
重置
"
></
td
>
</
tr
>
</
table
>
</
form
>
</
center
>
</
body
>
</
html
>
2. 数据库脚本
use csu
go
if exists(select 1 from sysobjects where name='city')
drop table city
if exists(select 1 from sysobjects where name='province')
drop table province
create table province
(
pid int identity(1,1) primary key,
name varchar(20),
)
go
create table city
(
cid int identity(1,1) primary key,
pid int,
name varchar(20),
)
go
insert into province (name) values ('湖南')
insert into province (name) values ('浙江')
insert into province (name) values ('广东')
go
insert into city (pid, name) values (1,'长沙')
insert into city (pid, name) values (1,'岳阳')
insert into city (pid, name) values (1,'张家界')
insert into city (pid, name) values (2,'杭州')
insert into city (pid, name) values (2,'温州')
insert into city (pid, name) values (2,'金华')
insert into city (pid, name) values (3,'广州')
insert into city (pid, name) values (3,'深圳')
insert into city (pid, name) values (3,'东莞')
go