Ajax实现三级联动

最新推荐文章于 2022-10-06 15:33:50 发布

月与清酒

最新推荐文章于 2022-10-06 15:33:50 发布

阅读量925

点赞数 1

分类专栏： Javascript Java 文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/weixin_57839268/article/details/122259485

版权

Java 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Javascript

4 篇文章 0 订阅

订阅专栏

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

jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>三级联动</title>
  <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
    $(function () {
      $.ajax({
        type: "get",
        url: "provinceAll",
        dataType: "json",
        success: function (data) {
          var obj = $("#province");
          for (var i = 0; i < data.length; i++) {
            var ob = "<option value='" + data[i].pid + "'>" + data[i].pname + "</option>";
            obj.append(ob);
          }
        }
      });
    });
  </script>
</head>
<body>
    <select id="province" name="province">
      <option>请选择</option>
    </select>省
    <select id="city" name="city">
      <option>请选择</option>
    </select>市
    <select id="district" name="district">
      <option>请选择</option>
    </select>区
<script>
  $(function () {
    $("#province").change(function () {
      $.ajax({
        type: "get",
        url: "cityAll?pid="+$("#province").val(),
        dataType: "json",
        success:function (data) {
          var obj=$("#city");
          for (var i = 0; i < data.length; i++) {
            var ob="<option value='"+data[i].cid+"'>"+data[i].cname+"</option>";
            obj.append(ob);
          }
        }
      });
    })
    $("#city").change(function () {
      $("#district option").remove();
      $.ajax({
        type: "get",
        url: "districtAll?cid="+$("#city").val(),
        dataType: "json",
        success:function (data) {
          var obj=$("#district");
          for (var i = 0; i < data.length; i++) {
            var ob="<option value='"+data[i].did+"'>"+data[i].dname+"</option>";
            obj.append(ob);
          }
        }
      });
    })
  })
</script>
</body>
</html>

servlet页面

package Servlet;

import com.alibaba.fastjson.JSONObject;
import dao.ProvinceDao;
import entity.Import;

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.util.List;

@WebServlet("/provinceAll")
public class ProvinceServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        Import i = new Import();
        List<ProvinceDao> plist = i.LookProvince();
        System.out.println(JSONObject.toJSONString(plist));
        response.getWriter().write(JSONObject.toJSONString(plist));
    }
}

package Servlet;

import com.alibaba.fastjson.JSONObject;
import dao.CityDao;
import entity.Import;

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.util.List;

@WebServlet("/cityAll")
public class CityServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String pid = request.getParameter("pid");
        Import i = new Import();
        List<CityDao> clist = i.LookCity(Integer.parseInt(pid));
        System.out.println(JSONObject.toJSONString(clist));
        response.getWriter().write(JSONObject.toJSONString(clist));
    }
}

package Servlet;

import com.alibaba.fastjson.JSONObject;

import dao.DistrictDao;
import entity.Import;

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.util.List;

@WebServlet("/districtAll")
public class DistrictServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String cid = request.getParameter("cid");
        Import i = new Import();
        List<DistrictDao> clist = i.LookDistrict(Integer.parseInt(cid));
        System.out.println(JSONObject.toJSONString(clist));
        response.getWriter().write(JSONObject.toJSONString(clist));
    }
}