本文實例為大家分享了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(); } }}
新聞熱點
疑難解答
圖片精選
