现在的位置: 首页 > 综合 > 正文

JSP结合JavaScript实现数据联动

2018年05月09日 ⁄ 综合 ⁄ 共 3547字 ⁄ 字号 评论关闭

 

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
 
【上篇】
【下篇】

抱歉!评论已关闭.