Ajax学习之------>Ajax和Json实现无限下拉框联动(上)
2013-03-08 22:13
465 查看
init.jsp页面，直接跳转到InitShengServlet2这个servlet初始化省份
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <jsp:forward page="/InitShengServlet2"></jsp:forward>
/**
该servlet初始化完后跳转到list4.jsp
*/
InitShengServletInitShengServletpackage com.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.dao.CityDao;
@SuppressWarnings("serial")
public class InitShengServlet2 extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
CityDao cityDao=new CityDao();
request.setAttribute("shengList", cityDao.findByParentId(0));
request.getRequestDispatcher("list4.jsp").forward(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
} /**
数据库操作的工具类
*/package com.db;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class DBManager {
public Connection getCon() {
try {
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
return DriverManager.getConnection(
"jdbc:sqlserver://127.0.0.1:1433;DatabaseName=cityManager",
"sa", "sasa");
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
// 查询结果
public ResultSet query(String sql, Object... p) {
Connection con = getCon();
PreparedStatement ps = null;
try {
ps= con.prepareStatement(sql);
if (p != null)
for (int i = 0; i < p.length; i++) {
ps.setObject(i + 1, p[i]);
}
return ps.executeQuery();
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
// 增删改
public int update(String sql, Object... p) {
Connection con = getCon();
PreparedStatement ps=null;
try {
ps= con.prepareStatement(sql);
if (p != null)
for (int i = 0; i < p.length; i++) {
ps.setObject(i + 1, p[i]);
}
return ps.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
throw new RuntimeException("增删改失败");
}finally{
this.closePrepStmt(ps);
this.closeConnection(con);
}
}
//关闭Connection
public void closeConnection(Connection con) {
try {
if (con != null)
con.close();
} catch (Exception e) {
e.printStackTrace();
}
}
//关闭PreparedStatement
public void closePrepStmt(PreparedStatement ps) {
try {
if (ps != null)
ps.close();
} catch (Exception e) {
e.printStackTrace();
}
}
//关闭ResultSet
public void closeResultSet(ResultSet rs) {
try {
if (rs != null)
rs.close();
} catch (Exception e) {
e.printStackTrace();
}
}
}
/** 处理根据ID找城市*/package com.dao;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import com.db.DBManager;
import com.vo.City;
public class CityDao {
public List<City> findByParentId(int parentId){
String sqlString="select cityId,cityName,parentId,context from city where parentId="+parentId;
DBManager dbManager=new DBManager();
ResultSet rs=dbManager.query(sqlString);
List<City> cities=new ArrayList<City>();
try {
while(rs.next()){
cities.add(new City(rs.getInt("cityId") ,rs.getString("cityName") ,rs.getString("context")));
}
} catch (Exception e) {
e.printStackTrace();
}
return cities;
}
}
list4.jsp<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>无限下拉框联动</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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/console.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/loading.js"></script>
<script type="text/javascript">
var xmlHttpRequest = createXmlHttpRequest();
var tagId2;
//发送请求查找指定省份ID的市区
function findShi(shengId,tagId) {
tagId2=tagId;
var isDelete=false;
var sons=document.getElementById(tagId).childNodes;
for ( var i = (sons.length-1); i >=0; i--) {
if(sons[i].nodeName.toUpperCase()=="UL"){
sons[i].parentNode.removeChild(sons[i]);
isDelete=true;
}
}
if(isDelete) return;
var url = "${pageContext.request.contextPath}/getShiServlet2?shengId="
+ shengId;
xmlHttpRequest.open("GET", url, true);
//关联好回调函数
xmlHttpRequest.onreadystatechange = shiCallback;
//清除缓存方法 加入请求头
xmlHttpRequest.setRequestHeader("If-Modified-Since", "0");
//真正向服务器端发送数据
xmlHttpRequest.send(null);
return false;
}
//找到指定省份ID的市区后给市区的节点增加值
function shiCallback() {
if (xmlHttpRequest.readyState == 4) {
debug("xmlHttpRequest.readyState==" + xmlHttpRequest.readyState);
debug("xmlHttpRequest.status ==" + xmlHttpRequest.status);
if (xmlHttpRequest.status == 200) {
var s = xmlHttpRequest.responseText;
debug("收到服务器回应==" + s);
var shis = eval(s);
if(shis.length==0){
debug("--->shis.length==0");
return;
}
var pli=document.getElementById(tagId2);
var nul=document.createElement("ul");
for ( var i = 0; i <shis.length; i++) {
var nli=document.createElement("li");
nli.id="tag"+shis[i].cityId;
//注意转移双引号
nli.innerHTML="<a href='#' onclick='return findShi("+shis[i].cityId+",\"tag"+shis[i].cityId+"\");'>"+shis[i].cityName+"</a>";
nul.appendChild(nli);
}
pli.appendChild(nul);
}
}
}
</script>
</head>
<body>
<h1>
无限下拉框联动
</h1>
<h3>
您来自哪里?
</h3>
<hr>
<ul>
<c:forEach items="${requestScope.shengList}" var="sheng">
<li id="tag${sheng.cityId}">
<a href="#"
onclick="return findShi(${sheng.cityId},'tag${sheng.cityId}');">
${sheng.cityName}</a>
</li>
</c:forEach>
</ul>
<hr>
</body>
</html>
package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import com.dao.CityDao;
import com.vo.City;
public class getShiServlet2 extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
int shengId=Integer.parseInt(request.getParameter("shengId"));
CityDao cityDao=new CityDao();
List<City> cities=cityDao.findByParentId(shengId);
if(cities!=null){
//声明 JSONArray
JSONArray jsonArray=new JSONArray(cities);
//生产字符串
out.print(jsonArray.toString());
System.out.print(jsonArray.toString());
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用Ajax实现多级联动下拉列表For JSP（无限级别，JSON传输数据，含全国地区数据库
- Ajax实现下拉框级联（在servlet中把从数据库取出来的值以json形式返回ajax，用jquery遍历便利更新<option>的值）
- ajax&json实现二级下拉框联动，简单示例
- Ajax实现无刷新三联动下拉框
- Ajax实现无刷新三联动下拉框
- 学习ajax－二级联动下拉列表
- Ajax实现三级联动下拉框
- JQuery+Ajax实现下拉框联动（省市联动）
- AJAX学习之序列二：struts2 jquery json 实现AJAX 注册ID验证
- 菜鸟学Java（七）——Ajax+Servlet实现无刷新下拉联动
- Ajax+json+jquery实现无限瀑布流布局
- AJAX多级下拉联动【JSON】
- MVC 页面实现ajax刷新联动下拉列表
- Java+Jquery实现的ajax技术对3级联动下拉框的实现
- jQuery+JSON实现AJAX二级联动实例分析
- 用Ajax.net实现的一个无刷新的多级联动下拉列表框
- 用Ajax.net实现的一个无刷新的多级联动下拉列表框
- Ajax实现无刷新三联动下拉框
- Ajax实现三级联动下拉框
- (转)Django ====> 实战学习篇十一 Django实现RESTFul web service,Django+jquery,ajax