ajax实现省市三级联动效果

本文实例为大家分享了ajax实现三级联动效果的具体代码，供大家参考，具体内容如下

1、html代码

!DOCTYPE html
html
head
 meta charset="UTF-8"
 titleTitle/title
 style type="text/css"
  .wrap
  {
   background-color: beige;
   width: 400px;
   height: 200px;
   margin: 0 auto;
   text-align: center;
   margin-top: 200px;
  }
  .wrap select
  {
   width:130px;
   height: 30px;
  }
 /style
 script type="text/javascript" src="jquery-1.8.3.min.js"/script
/head
body
div class="wrap"
 select id="province"
 /select
 select id="city"
 /select
/div
script type="text/javascript"
 function getctiydata() {
  $("#city").empty();
  var pid = $("#province").val();
  $.ajax({
   url:"/getCityspid="+pid,
   dataType:"json"
  }).done(function (data) {
   for (var i in data)
   {
    $("#city").append($("option value='"+ data[i].id +"'"
     + data[i].name +"/option"))
   }
  })
  
 }
 $.ajax({
  url: "/getAllProvince",
  dataType:"json"
 }).done(function (data) {
  for (var i in data)
  {
   $("#province").append($("option value = '"+data[i].id+"'"
    + data[i].name +"/option"))
  }
  getctiydata()
 });

 $("#province").change(function () {
  getctiydata()
 })
/script
/body
/html

2、javaservlet

package servlet;

import DButil.DataSourceUtil;
import com.alibaba.fastjson.JSON;
import domain.Province;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import javax.jws.WebService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

@WebServlet("/getAllProvince")
public class ProvinceServlet extends HttpServlet
{
 @Override
 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
 {
  resp.setContentType("application/json;charset=utf8");
  QueryRunner queryRunner = new QueryRunner(DataSourceUtil.getDataSource());
  String sql = "select * from province";
  try
  {
   ListProvince provinces = queryRunner.query(sql, new BeanListHandlerProvince(Province.class));
   Object json = JSON.toJSON(provinces);
   resp.getWriter().print(json);

  } catch (SQLException e)
  {
   e.printStackTrace();
  }

 }
}

package servlet;

import DButil.DataSourceUtil;
import com.alibaba.fastjson.JSON;
import domain.City;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import javax.jws.WebService;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

@WebServlet("/getCitys")
public class CityServlet extends HttpServlet
{
 @Override
 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
 {
  resp.setContentType("application/json;charset=utf8");
  QueryRunner queryRunner = new QueryRunner(DataSourceUtil.getDataSource());
  String pid = req.getParameter("pid");
  String sql = "select * from City where pid=";
  try
  {
   ListCity cities = queryRunner.query(sql, new BeanListHandlerCity(City.class), pid);
   Object toJSON = JSON.toJSON(cities);
   resp.getWriter().print(toJSON);
  } catch (SQLException e)
  {
   e.printStackTrace();
  }
 }
}

3、数据库池化

xml version="1.0" encoding="UTF-8"
c3p0-config
 default-config
  property name="driverClass"com.mysql.jdbc.Driver/property
  property name="jdbcUrl"jdbc:mysql://localhost:3306/text/property
  property name="user"root/property
  property name="password"root/property
  property name="acquireRetryAttempts"0/property
 /default-config
/c3p0-config