ajax省市县三级联动练习

最新推荐文章于 2022-06-09 10:10:12 发布

敲代码的彭于晏

最新推荐文章于 2022-06-09 10:10:12 发布

阅读量137

点赞数

分类专栏： ajax 文章标签： ajax struts2

本文链接：https://blog.csdn.net/qq_42074949/article/details/108074347

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

预期效果

（1）创建库表，插入数据

这是库表信息

有关数据库问题请查看https://blog.csdn.net/qq_42074949/article/details/108074190

链接：https://pan.baidu.com/s/1iAWdBpL0Z5-xKXC48HEgfQ
提取码：21mo

（2）搭建开发环境（使用的是mybatis+struts2+maven）

引入jar包，其中特别注意引入gson.jar

<!--json转换 -->
    <dependency>
      <groupId>com.google.code.gson</groupId>
      <artifactId>gson</artifactId>
      <version>2.8.5</version>
    </dependency>

工具类等

（3）创建实体类

public class City implements Serializable {
    private Integer id;
    private String name;
    private String url;
    private String leaf;
    private Integer parentId;
}

（4）mapper层

public interface CityDao {
    List<City> queryCities(@Param("parentId") Integer parentId);
}

配置mapper.xml

<select id="queryCities" resultType="City">
		select id,name,url,leaf,parentid from cities
		<where>
			<if test="parentId==null">
				parentid is null
			</if>
			<if test="parentId!=null">
				parentid =#{parentId}
			</if>
		</where>
	</select>

（5）service层

public interface CityService  {
    public List<City> queryCities(Integer parentId);
}

public class CityServiceImpl implements CityService {
    @Override
    public List<City> queryCities(Integer parentId) {
        CityDao dao=(CityDao) DBUtil.getDao(CityDao.class);
        List<City> list=dao.queryCities(parentId);
        return list;
    }
}

（6）action层

@Getter @Setter 为使用了lombok插件自动生成get，set的注解

@Getter
@Setter
public class CityAction {
    private Integer parentId;

    public String queryCities() {
        CityService service = new CityServiceImpl();
        List<City> list = service.queryCities(parentId);
        Gson gson = new Gson();
        String json = gson.toJson(list);
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("UTF-8");
        PrintWriter writer = null;
        try {
            writer = response.getWriter();
        } catch (IOException e) {
            e.printStackTrace();
        }
        writer.print(json);
        writer.flush();
        return null;
    }
}

<struts>
	<package name="city" extends="struts-default" namespace="/city">
		<action name="queryCities" class="com.baizhi.action.CityAction" method="queryCities"></action>
	</package>
</struts>

配置struts2文件

（7）网页显示

新建html

<body>
<select name="" id="province">
    <option value="">请选择省</option>
</select> 省
<select name="" id="city">
    <option value="">请选择市</option>
</select> 市
<select name="" id="country">
    <option value="">请选择县</option>
</select> 县（区）
</body>

js脚本

 <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
    <script>
        $(function(){
            $.get('/day_01work/city/queryCities','',function(data){

                for(let i=0;i<data.length;i++){
                    $('#province').append($('<option value="' + data[i].id + '">' + data[i].name + '</option>'));
                }
            },'json')

            $('#province').change(function(){
                $('#city').empty();
               // console.log($(this).val()+"1");
                $.get('/day_01work/city/queryCities','parentId='+$(this).val(),function (data) {
                   // console.log("2");
                    for(let i=0;i<data.length;i++){
                        $('#city').append($('<option value="' + data[i].id + '">' + data[i].name + '</option>'));

                    }
                    $('#city').change();
                },'json')

                //console.log($(this).val()+"3");
            })

            $('#city').change(function(){
                $('#country').empty();
                //console.log($(this).val()+"4");
                $.get('/day_01work/city/queryCities','parentId='+$(this).val(),function(data){
                    for (let i = 0; i < data.length; i++) {
                        $('#country').append($('<option value="' + data[i].id + '">' + data[i].name + '</option>'));
                    }
                },'json')
            })
        })
    </script>

敲代码的彭于晏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax省市县三级联动练习

预期效果（1）创建库表，插入数据这是库表信息链接：https://pan.baidu.com/s/1iAWdBpL0Z5-xKXC48HEgfQ提取码：21mo（2）搭建开发环境（使用的是mybatis+struts2+maven）引入jar包，其中特别注意引入gson.jar <dependency> <groupId>com.google.code.gson</groupId...
复制链接

扫一扫

专栏目录