jQuery_ajax实例级联查询 

<%--
  Created by IntelliJ IDEA.
  User: 杨家兴
  Date: 2022-5-3
  Time: 9:44
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>省市级联查询</title>

    <style>
          #div1{margin: 0 auto;border:1px  solid #000000; width: 300px;height: 100px}
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
      $(function (){


          $("#province").empty();
          $.ajax({
            url: "queryProvince",
            type:"get",
            dataType:"json",
            success:function (json){
              $.each(json,function (i,n){

                $("#province").append("<option value='"+n.id+"'>"+n.name+" </option>");
              })

            }
          })

        $("#province").change(function (){
           $("#city").empty();
            var obj=$("#province>option:selected")
            var  id=obj.val();
            $.post("queryCity",{id:id},function (json){
              $.each(json,function (i,n){

                $("#city").append("<option value='"+i+"'>"+n.name+" </option>");
              })
            })
        })
      })
    </script>
  </head>
  <body>
            <div id="div1">
              <table>
                <tr>
                <td>省份名称</td>
                  <td>
              <select  id="province">
                    <option value="0"  >请选择</option>
              </select>
                  </td>
                  <td>
                    <button  id="btn">加载省份</button>
                  </td>
                </tr>
                <tr>
                  <td>城市</td>
                  <td>
                    <select  id="city">
                      <option value="0">请选择</option>
                    </select>
                  </td>
                </tr>
              </table>

            </div>

  </body>
</html>
String  id=request.getParameter("id");
        if (id!=null&&!"".equals(id.trim())){
            System.out.println("进了servlet");
            //调用dao获取所有的省份信息
            String  json="{}";
            QueryCityDao  queryCityDao=new QueryCityDao();

            List<city>  list= null;
            try {
                list = queryCityDao.queryCityById(Integer.valueOf(id));
            } catch (SQLException e) {
                e.printStackTrace();
            }
            //把list转为json格式的的数据
            if(list!=null){
                System.out.println(list);

                ObjectMapper  objectMapper=new ObjectMapper();
                json=objectMapper.writeValueAsString(list);
                //输出json数据，响应ajax请求，返回数据


                response.setContentType("application/json;charset=utf-8");

                PrintWriter pw=response.getWriter();

                pw.println(json);
                pw.flush();
                pw.close();

            }

        }

 

 

posted @ 2022-05-04 22:27  曾经偏执的少年  阅读(72)  评论(0)    收藏  举报