省市联动 json ajax

来源：互联网发布：windows 7经典主题编辑：程序博客网时间：2024/04/30 14:43

provice.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

   pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#provice").change(function(){
   //当改变时,获取选中的省份的id
   var pid=$(this).val();
   $.post("${pageContext.request.contextPath}/CityServlet",{"pid":pid},function(data){
       //alert(data);
       var $city = $("#city");
       $city.html("<option >--请选择--</option>")
       $(data).each(function(i,n){
           $city.append("<option value=" + n.cid + ">" + n.cname + "</option>");
       })

   },"json");
})
})
</script>
<title>Insert title here</title>
</head>
<body>
   <table border="1px">
       <tr>
       <td>籍贯</td>
       <td>
       <select id="provice" name="provice">
       <option value="">--请选择--</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>
   </table>
</body>

</html>

ProviceServlet

public class ProviceServlet extends HttpServlet {
   private static final long serialVersionUID = 1L;

   protected void doGet(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {
       try {

           FindDao provice = new FindDao();
           List<domain> list = provice.provice();

           if (list != null) {
               request.setAttribute("list", list);
               request.getRequestDispatcher("/provice.jsp").forward(request,
                       response);

           } else {
               System.out.println("错误提示到页面信息");
           }

       } catch (Exception e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       }

   }

CityServlet

public class CityServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       try {
           request.setCharacterEncoding("UTF-8");
       String pid = request.getParameter("pid");
       FindDao city=new FindDao();
                   List<domain> list = city.city(pid);

                   //把list转为json数组,数组中保存着json样式
                   JsonConfig config=new JsonConfig();
                   //不包括这些数据
                   config.setExcludes(new String[]{"pid","pname"});
                   JSONArray jsonArray = JSONArray.fromObject(list, config);
                   System.out.println(jsonArray.toString());
                   response.setContentType("text/html;charset=UTF-8");
                   //以数组的形式响应出去
                   response.getWriter().println(jsonArray.toString());

       } catch (Exception e) {

           e.printStackTrace();
       }

   }

FindDao

public class FindDao {

   public List<domain> provice() throws Exception {
       QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
       String sql = "select *from provice";
       List<domain> list = qr.query(sql, new BeanListHandler<domain>(domain.class));
       return list;

   }
   public List<domain> city(String pid) throws Exception{
       QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
       String sql = "select *from city where pid =?";
   List<domain> list = qr.query(sql, new BeanListHandler<domain>(domain.class),pid);
       return list;
   }


}

阅读全文

0 0