ajax完成省市联动
1.用ajax传输xml文件完成省市联动
首先创建数据库
省市联动一个province表一个city表,一对多关系
这是province表
pid pname
1 重庆
2 四川
这是city表
cid cname pid
1 沙坪坝区 1
2 江北区 1
3 渝中区 1
4 成都 2
5 眉山 2
6 乐山 2
下拉列表的html代码:
<tr> <td>籍贯</td> <td> <select id="province" name="province" > <option>-请选择-</option> <c:forEach var="p" items="${list }"> <option value="${p.pid }">${p.pname }</option> </c:forEach> </select> <select id="city" name="city"> <option>-请选择-</option> </select> </td> </tr>
给下拉列表绑定change事件
$(function() { //绑定事件 $("#province").change(function(){ //获取事件改变时传入的pid var pid = $(this).val(); //调用异步 $.post("/AJAX/CityServlet",{"pid":pid},function(data) { //获取到市列表属性 var $city = $("#city"); //清空列表属性中的选项 $city.html("<option>--请选择--</option>"); $(data).find("city").each(function(i,n){ var cid = $(this).children("cid").text(); var cname = $(this).children("cname").text(); $city.append("<option value='"+cid+"'>"+cname+"</option>"); }); }); }); });
从一个servlet中在数据库获取province数据存入域对象
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try { //调用业务层 ProvinceService ps = new ProvinceService(); List<Province> list = ps.getAll(); request.setAttribute("list", list); request.getRequestDispatcher("/regist.jsp").forward(request, response); } catch (SQLException e) { e.printStackTrace(); throw new RuntimeException(); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }
业务层
ProvinceDao pd = new ProvinceDao(); public List<Province> getAll() throws SQLException { //调用dao层 List<Province> list = pd.getAll(); return list; }
dao层
QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource()); public List<Province> getAll() throws SQLException { List<Province> list = qr.query("select * from province", new BeanListHandler<Province>(Province.class)); return list; }
编写异步的servlet
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try { String pid = request.getParameter("pid"); ProvinceService ps = new ProvinceService(); List<City> list = ps.selectById(pid); //将list转换成xml文件 XStream xs = new XStream(); //修改标签名 xs.alias("city", City.class); String xmlStr = xs.toXML(list); response.setContentType("text/xml;charset=utf-8"); response.getWriter().write(xmlStr); } catch (SQLException e) { e.printStackTrace(); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }
service层
public List<City> selectById(String pid) throws SQLException { List<City> list = pd.selectById(pid); return list; }
dao层
public List<City> selectById(String pid) throws SQLException { List<City> list = qr.query("select * from city where pid = ?", new BeanListHandler<City>(City.class), pid); return list; }
2.改用json传输异步数据
其余的地方不变,只需要该servlet和jq代码
servlet代码:
private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try { String pid = request.getParameter("pid"); ProvinceService ps = new ProvinceService(); List<City> list = ps.selectById(pid); //将list集合转成json JsonConfig jc = new JsonConfig(); //去除不需要的字段 jc.setExcludes(new String[]{"pid"}); //将list集合转换成json对象 JSONArray jsonArray = JSONArray.fromObject(list, jc); System.out.println(jsonArray); response.setContentType("text/html;charset=UTF-8"); //将json对象转换成字符串发出 response.getWriter().println(jsonArray.toString()); } catch (SQLException e) { e.printStackTrace(); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }
jq代码
$(function() { //绑定事件 $("#province").change(function(){ //获取事件改变时传入的pid var pid = $(this).val(); //调用异步 $.post("/AJAX/JsonServlet",{"pid":pid},function(data) { //获取到市列表属性 var $city = $("#city"); //清空列表属性中的选项 $city.html("<option>--请选择--</option>"); $(data).each(function(i,n){ $city.append("<option value='"+n.cid+"'>"+n.cname+"</option>"); }); },"json"); }); });