• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

Ajax实现三级联动

武飞扬头像
月与清酒
帮助1

使用Ajax局部刷新进行一个省,市,区的选择,选中省时会自动刷新市里面的内容,以此类推,来实现省,市,区的选择。

jsp页面

  1.  
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2.  
    <html>
  3.  
    <head>
  4.  
    <title>三级联动</title>
  5.  
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  6.  
    <script type="text/javascript">
  7.  
    $(function () {
  8.  
    $.ajax({
  9.  
    type: "get",
  10.  
    url: "provinceAll",
  11.  
    dataType: "json",
  12.  
    success: function (data) {
  13.  
    var obj = $("#province");
  14.  
    for (var i = 0; i < data.length; i ) {
  15.  
    var ob = "<option value='" data[i].pid "'>" data[i].pname "</option>";
  16.  
    obj.append(ob);
  17.  
    }
  18.  
    }
  19.  
    });
  20.  
    });
  21.  
    </script>
  22.  
    </head>
  23.  
    <body>
  24.  
    <select id="province" name="province">
  25.  
    <option>请选择</option>
  26.  
    </select>
  27.  
    <select id="city" name="city">
  28.  
    <option>请选择</option>
  29.  
    </select>
  30.  
    <select id="district" name="district">
  31.  
    <option>请选择</option>
  32.  
    </select>
  33.  
    <script>
  34.  
    $(function () {
  35.  
    $("#province").change(function () {
  36.  
    $.ajax({
  37.  
    type: "get",
  38.  
    url: "cityAll?pid=" $("#province").val(),
  39.  
    dataType: "json",
  40.  
    success:function (data) {
  41.  
    var obj=$("#city");
  42.  
    for (var i = 0; i < data.length; i ) {
  43.  
    var ob="<option value='" data[i].cid "'>" data[i].cname "</option>";
  44.  
    obj.append(ob);
  45.  
    }
  46.  
    }
  47.  
    });
  48.  
    })
  49.  
    $("#city").change(function () {
  50.  
    $("#district option").remove();
  51.  
    $.ajax({
  52.  
    type: "get",
  53.  
    url: "districtAll?cid=" $("#city").val(),
  54.  
    dataType: "json",
  55.  
    success:function (data) {
  56.  
    var obj=$("#district");
  57.  
    for (var i = 0; i < data.length; i ) {
  58.  
    var ob="<option value='" data[i].did "'>" data[i].dname "</option>";
  59.  
    obj.append(ob);
  60.  
    }
  61.  
    }
  62.  
    });
  63.  
    })
  64.  
    })
  65.  
    </script>
  66.  
    </body>
  67.  
    </html>
  68.  
     
学新通

servlet页面

  1.  
    package Servlet;
  2.  
     
  3.  
    import com.alibaba.fastjson.JSONObject;
  4.  
    import dao.ProvinceDao;
  5.  
    import entity.Import;
  6.  
     
  7.  
    import javax.servlet.ServletException;
  8.  
    import javax.servlet.annotation.WebServlet;
  9.  
    import javax.servlet.http.HttpServlet;
  10.  
    import javax.servlet.http.HttpServletRequest;
  11.  
    import javax.servlet.http.HttpServletResponse;
  12.  
    import java.io.IOException;
  13.  
    import java.util.List;
  14.  
     
  15.  
    @WebServlet("/provinceAll")
  16.  
    public class ProvinceServlet extends HttpServlet {
  17.  
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  18.  
     
  19.  
    }
  20.  
     
  21.  
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  22.  
    response.setCharacterEncoding("utf-8");
  23.  
    response.setContentType("text/html;charset=utf-8");
  24.  
    Import i = new Import();
  25.  
    List<ProvinceDao> plist = i.LookProvince();
  26.  
    System.out.println(JSONObject.toJSONString(plist));
  27.  
    response.getWriter().write(JSONObject.toJSONString(plist));
  28.  
    }
  29.  
    }
学新通
  1.  
    package Servlet;
  2.  
     
  3.  
    import com.alibaba.fastjson.JSONObject;
  4.  
    import dao.CityDao;
  5.  
    import entity.Import;
  6.  
     
  7.  
    import javax.servlet.ServletException;
  8.  
    import javax.servlet.annotation.WebServlet;
  9.  
    import javax.servlet.http.HttpServlet;
  10.  
    import javax.servlet.http.HttpServletRequest;
  11.  
    import javax.servlet.http.HttpServletResponse;
  12.  
    import java.io.IOException;
  13.  
    import java.util.List;
  14.  
     
  15.  
    @WebServlet("/cityAll")
  16.  
    public class CityServlet extends HttpServlet {
  17.  
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  18.  
     
  19.  
    }
  20.  
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  21.  
    response.setCharacterEncoding("utf-8");
  22.  
    response.setContentType("text/html;charset=utf-8");
  23.  
    String pid = request.getParameter("pid");
  24.  
    Import i = new Import();
  25.  
    List<CityDao> clist = i.LookCity(Integer.parseInt(pid));
  26.  
    System.out.println(JSONObject.toJSONString(clist));
  27.  
    response.getWriter().write(JSONObject.toJSONString(clist));
  28.  
    }
  29.  
    }
学新通
  1.  
    package Servlet;
  2.  
     
  3.  
    import com.alibaba.fastjson.JSONObject;
  4.  
     
  5.  
    import dao.DistrictDao;
  6.  
    import entity.Import;
  7.  
     
  8.  
    import javax.servlet.ServletException;
  9.  
    import javax.servlet.annotation.WebServlet;
  10.  
    import javax.servlet.http.HttpServlet;
  11.  
    import javax.servlet.http.HttpServletRequest;
  12.  
    import javax.servlet.http.HttpServletResponse;
  13.  
    import java.io.IOException;
  14.  
    import java.util.List;
  15.  
     
  16.  
    @WebServlet("/districtAll")
  17.  
    public class DistrictServlet extends HttpServlet {
  18.  
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  19.  
     
  20.  
    }
  21.  
     
  22.  
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  23.  
    response.setCharacterEncoding("utf-8");
  24.  
    response.setContentType("text/html;charset=utf-8");
  25.  
    String cid = request.getParameter("cid");
  26.  
    Import i = new Import();
  27.  
    List<DistrictDao> clist = i.LookDistrict(Integer.parseInt(cid));
  28.  
    System.out.println(JSONObject.toJSONString(clist));
  29.  
    response.getWriter().write(JSONObject.toJSONString(clist));
  30.  
    }
  31.  
    }
学新通

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhhecee
系列文章
更多 icon
同类精品
更多 icon
继续加载