ajax实现省市三级联动效果
程序员文章站
2022-06-23 22:27:45
本文实例为大家分享了ajax实现三级联动效果的具体代码，供大家参考，具体内容如下
1、html代码
本文实例为大家分享了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;
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
{
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>
以上就是省市联动的核心代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。