ajax实现省市三级联动效果

本文实例为大家分享了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
{
List<Province> provinces = queryRunner.query(sql, new BeanListHandler<Province>(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;

@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
{
List<City> cities = queryRunner.query(sql, new BeanListHandler<City>(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>

以上就是省市联动的核心代码。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持悠久资源网。

您可能感兴趣的文章: