微客导航 » 文章资讯 » ajax实现省市三级联动效果

ajax实现省市三级联动效果

2023-09-02 15:37:04 308

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

1、html代码





Title

.wrap
{
background-color:beige;
width:400px;
height:200px;
margin:0auto;
text-align:center;
margin-top:200px;
}
.wrapselect
{
width:130px;
height:30px;
}

functiongetctiydata(){ $("#city").empty(); varpid=$("#province").val(); $.ajax({ url:"/getCitys?pid="+pid, dataType:"json" }).done(function(data){ for(variindata) { $("#city").append($("" +data[i].name+"")) } }) } $.ajax({ url:"/getAllProvince", dataType:"json" }).done(function(data){ for(variindata) { $("#province").append($("" +data[i].name+"")) } getctiydata() }); $("#province").change(function(){ getctiydata() })

2、javaservlet

packageservlet;

importDButil.DataSourceUtil;
importcom.alibaba.fastjson.JSON;
importdomain.Province;
importorg.apache.commons.dbutils.QueryRunner;
importorg.apache.commons.dbutils.handlers.BeanListHandler;

importjavax.jws.WebService;
importjavax.servlet.ServletException;
importjavax.servlet.annotation.WebServlet;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjava.io.IOException;
importjava.sql.SQLException;
importjava.util.List;

@WebServlet("/getAllProvince")
publicclassProvinceServletextendsHttpServlet
{
@Override
protectedvoidservice(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException
{
resp.setContentType("application/json;charset=utf8");
QueryRunnerqueryRunner=newQueryRunner(DataSourceUtil.getDataSource());
Stringsql="select*fromprovince";
try
{
Listprovinces=queryRunner.query(sql,newBeanListHandler(Province.class));
Objectjson=JSON.toJSON(provinces);
resp.getWriter().print(json);

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

}
}

packageservlet;

importDButil.DataSourceUtil;
importcom.alibaba.fastjson.JSON;
importdomain.City;
importorg.apache.commons.dbutils.QueryRunner;
importorg.apache.commons.dbutils.handlers.BeanListHandler;

importjavax.jws.WebService;
importjavax.servlet.ServletException;
importjavax.servlet.annotation.WebServlet;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importjava.io.IOException;
importjava.sql.SQLException;
importjava.util.List;

@WebServlet("/getCitys")
publicclassCityServletextendsHttpServlet
{
@Override
protectedvoidservice(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException
{
resp.setContentType("application/json;charset=utf8");
QueryRunnerqueryRunner=newQueryRunner(DataSourceUtil.getDataSource());
Stringpid=req.getParameter("pid");
Stringsql="select*fromCitywherepid=?";
try
{
Listcities=queryRunner.query(sql,newBeanListHandler(City.class),pid);
ObjecttoJSON=JSON.toJSON(cities);
resp.getWriter().print(toJSON);
}catch(SQLExceptione)
{
e.printStackTrace();
}
}
}

3、数据库池化




com.mysql.jdbc.Driver
jdbc:mysql://localhost:3306/text
root
root
0

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

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

返回顶部
3162201930
czq8825@qq.com

ajax实现省市三级联动效果

热门推荐

随机推荐