使用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; 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>
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。