本文實例為大家分享了ajax實現三級聯動效果的具體代碼，供大家參考，具體內容如下
1、html代碼
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>Title/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:"/getCitys?pid="+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>
以上就是省市聯動的核心代碼。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- PHP+Mysql+Ajax+JS實現省市區三級聯動
- AJAX省市區三級聯動下拉菜單(java版)
- ajax三級聯動下拉菜單效果
- ajax三級聯動的實現方法
- ajax實現無刷新省市縣三級聯動
- ajax實現三級聯動的基本方法
- Ajax商品分類三級聯動的簡單實現(案例)
- Ajax+php實現商品分類三級聯動
- 簡單實現ajax三級聯動效果
- AJAX實現省市縣三級聯動效果
