ajax使用json下拉框,Ajax学习之------>Ajax和Json实现无限下拉框联动(上)

init.jsp页面，直接跳转到InitShengServlet2这个servlet初始化省份

/**

该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,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 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 cities=new ArrayList();

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

无限下拉框联动

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

var nli=document.createElement("li");

nli.id="tag"+shis[i].cityId;

//注意转移双引号

nli.innerHTML=""+shis[i].cityName+"";

nul.appendChild(nli);

}

pli.appendChild(nul);

}

}

}

无限下拉框联动

您来自哪里?

---

• οnclick="return findShi(${sheng.cityId},'tag${sheng.cityId}');">

  ${sheng.cityName}

---

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,IOException {

response.setContentType("text/html;charset=utf-8");

PrintWriter out = response.getWriter();

int shengId=Integer.parseInt(request.getParameter("shengId"));

CityDao cityDao=new CityDao();

List 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,response);

}

}