[AJAX] -AJAX,你要学的,都在这儿(案例小剧场-三级联动(经典))

prtyaa 2023-12-27 15:26:49  50283

分类专栏：资讯

Ajax案例之三级联动：

功能需求：

页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框

选择省，则市下拉框中出现对应的该省下的市信息，选择市，则区/县下拉框中

出现对应的该市下面的区/县信息

技术分析:

ajax技术+jsp+servlet+mybatis

需求分析(思路):

1、创建页面：页面中有三个下拉框，分别为省、市、区/县

2、页面加载成功发起ajax请求，请求省的信息，并将响应结果填充到省下拉框中

3、选择省触发一个新的js函数的执行，该函数中发起新的ajax请求请求该省下的市信息，并将响应数据填充到市下拉框(onchange)

4、选择市信息触发一个新的js函数的执行，该函数中发起新的ajax请求请求该市下的区/县信息，并将数据填充到区/县下拉框中(onchange)

数据库设计：

创建表(area)：存储了省、市、区/县信息

设计表实现一：

只存储了数据，但是数据之间的层级关系没有存储。

地区id:areaid

地区名:areaname

设计表实现二：

地区id:areaid

地区名:areaname

地区上级id：parentid

sql语句设计:

查询所有的省信息:

select * from area where parentid=0;

查询选择的省的市信息(假如：选择的山东省的areaid为110000,)

select * from area where parentid=110000;

查询选择的市的区/县信息(假如：选择的山东省的济南市areaid为110001)

select * from area where parentid =110001;

观察上面的代码实际上只要写一个代码就够了就是查询parentid就行了

select * from area where parentid=?;

数据库实现:

上传附件貌似不行,建议百度自取,或者私信找我要

功能实现：

参照源码即可

代码缺陷：

发现请求省，市，县的代码中基本上是一致的。代码的冗余量有点大

解决:

考虑使用封装

实现:形同的保留，不同的传参。具体参照源码

代码部分

jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<head>
 <base href="<%=basePath%>">
    <title>三级联动</title>
    <style>
        .sel{
            width: 200px;
            height: 30px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        //页面加载执行查询
        $(function () {
            $.get("area",{parentid:0},function (data) {
                //使用eval方法将数据转换为js对象
                var areas= eval(data);
                //将响应省数据填充到省下拉框中
                //获取下拉框选项
                var sel1=$("#pre");
                //清空原有数据
                sel1.empty();
                //遍历数组
                for (var i=0; i<areas.length;i++){
                    /*这里拼接选项框内容,显示省份直辖市的信息及得到相应的areaid*/
                    sel1.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
                }
                //触发省下拉框的change事件
                $("#pre").trigger("change")
            })
            /*页面加载成功,给省下拉框添加事件,查询市的信息*/
            $("#pre").change(function () {
                //获取当前省的id
                var areaid1=$("#pre").val();
                //发起ajax请求,请求当前省的市信息
                $.get("area",{parentid:areaid1},function (data) {
                    //使用eval方法将数据转换为js对象
                    var areas2= eval(data);
                    //将响应省数据填充到省下拉框中
                    //获取下拉框选项
                    var sel2=$("#city");
                    //清空原有数据
                    sel2.empty();
                    //遍历数组
                    for (var i=0; i<areas2.length;i++){
                        /*这里拼接选项框内容,显示省份直辖市的信息及得到相应的areaid*/
                        sel2.append("<option value='"+areas2[i].areaid+"'>"+areas2[i].areaname+"</option>")
                    }
                    //触发市省下拉框的change事件
                    $("#city").trigger("change")
                })
            })
            /*页面加载成功,给市下拉框添加事件,查询区县的信息*/
            $("#city").change(function () {
                //获取当前市的id
                var areaid3=$("#city").val();
                //发起ajax请求,请求当前省的市信息
                $.get("area",{parentid:areaid3},function (data) {
                    //使用eval方法将数据转换为js对象
                    var areas3= eval(data);
                    //将响应省数据填充到省下拉框中
                    //获取下拉框选项
                    var sel3=$("#town");
                    sel3.empty()
                    //遍历数组
                    for (var i=0; i<areas3.length;i++){
                        /*这里拼接选项框内容,显示省份直辖市的信息及得到相应的areaid*/
                        sel3.append("<option value='"+areas3[i].areaid+"'>"+areas3[i].areaname+"</option>")
                    }
                })
            })
        })
    </script>
  </head>
  <body>
    <div style="margin: auto ;width: 800px ; margin-top: 300px">
        省:<select name="" id="pre" class="sel"></select>
        市:<select name="" id="city" class="sel"></select>
        区\县:<select name="" id="town" class="sel"></select>
    </div>
  </body>
</html>

servlet

没有考虑失败情况

package com.lin.servlet;

import com.google.gson.Gson;
import com.lin.pojo.Area;
import com.lin.service.AreaService;
import com.lin.service.impl.AreaServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

public class AreaServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置编码格式
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        //获取响应数据
        String parentid = req.getParameter("parentid");
        //处理请求
        AreaService service = new AreaServiceImpl();
        List<Area> area = service.selArea(parentid);
        //响应结果(这里用直接响应,ajax的作用重点重来都不是页面,而是数据,所以请求转发和响应重定向就没有意义)
        //请求转发和重定向一般都是当前的servlet处理一部分,然后请求转发和重定向给另外一个servlet继续处理

            resp.getWriter().write(new Gson().toJson(area));

    }
}

service

public interface AreaService {
    List<Area> selArea(String parentid);
}

serviceimpl

public class AreaServiceImpl implements AreaService {
    @Override
    public List<Area> selArea(String parentid) {
        SqlSession session = MyBatisUtil.getSession();
        AreaMapper mapper = session.getMapper(AreaMapper.class);
     List<Area> areas =  mapper.selAllArea(parentid);
     return areas;
    }
}

mapper

public interface AreaMapper {

    List<Area> selAllArea(@Param("parentid") String parentid);
}

mapper.xml

<mapper namespace="com.lin.mapper.AreaMapper">
    <select id="selAllArea" resultType="com.lin.pojo.Area">
        select * from area where parentid=#{parentid};
    </select>
</mapper>

封装的页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<head>
    <base href="<%=basePath%>">
    <title>三级联动</title>
    <style>
        .sel{
            width: 200px;
            height: 30px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        //页面加载执行查询
        $(function () {
            //发起ajax请求,请求所有省的信息
            getData(0,"pre");
            /*页面加载成功,给省下拉框添加事件,查询市的信息*/
            $("#pre").change(function () {
                //获取当前省的id
                var areaid=$("#pre").val();
                getData(areaid,"city")
                });
            /*页面加载成功,给市下拉框添加事件,查询区县的信息*/
            $("#city").change(function () {
                //获取当前市的id
                var areaid=$("#city").val();
                //发起ajax请求,区/县信息
                getData(areaid,"town")
            });

            //封装公共方法
            function getData(areaid,sid){
                //发起ajax请求,请求当前省的市信息
                $.get("area",{parentid:areaid},function (data) {
                    //使用eval方法将数据转换为js对象
                    var areas2= eval(data);
                    //将响应省数据填充到省下拉框中
                    //获取下拉框选项
                    var sel2=$("#"+sid);
                    //清空原有数据
                    sel2.empty();
                    //遍历数组
                    for (var i=0; i<areas2.length;i++){
                        /*这里拼接选项框内容,显示省份直辖市的信息及得到相应的areaid*/
                        sel2.append("<option value='"+areas2[i].areaid+"'>"+areas2[i].areaname+"</option>")
                    }
                    //触发市省下拉框的change事件
                    $("#"+sid).trigger("change")
                })
            }
        })
    </script>
</head>
<body>
<div style="margin: auto ;width: 800px ; margin-top: 300px">
    省:<select name="" id="pre" class="sel"></select>
    市:<select name="" id="city" class="sel"></select>
    区\县:<select name="" id="town" class="sel"></select>
</div>
</body>
</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31429

赞同 0

评论 0 条

[AJAX] -AJAX,你要学的,都在这儿(案例小剧场-三级联动(经典))

Ajax案例之三级联动：

相关文章

关注我们