利用ssh(servlet+spring+hibernate)+ajax实现城区联动

LM_AC

于 2017-10-25 17:49:49 发布

阅读量943

点赞数

分类专栏：第三阶段框架

本文链接：https://blog.csdn.net/Myair_AC/article/details/78344313

版权

第三阶段框架专栏收录该内容

6 篇文章 0 订阅

订阅专栏

需求:选中城市,会显示出对应城市的区的名字
在jsp页面,用到的是 < select>< option>标签,每个< option>有value属性,意思是指选中哪项,此select的value就是这个值.
jsp页面:先获取所有的城市,通过el表达式显示在页面,区的显示就利用ajax实现.(通过调用.ajax({}) 函数)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
 $(function(){
     $(".dis").change(function(){
           $.ajax({

                url:"${pageContext.request.contextPath}/DisServlet?id="+$("#cityid").val(),
                async:false,
                 success: function(data) {

                     //这里如果服务器返回的是json,这里解析json，然后通过for循环等，jq中的append方法进行html元素追加
                     // json是js对象  json[i]是一个对象
                     var json = JSON.parse(data);

                     $("#dis2").empty();
                     for (var i = 0; i < json.length; i++) {
                         $("#dis2").append(
                                    "<option>"+json[i].dis_name+"</option>");
                    }

                } 
         })

     })
})
</script>
</head>

<body>
    <div>
        <select id="cityid" class="dis">
        <!-- <option></option> -->
            <c:forEach items="${list}" var="city">
                <option value="${city.city_id }">${city.city_name }</option>
            </c:forEach>
        </select>
        <select id="dis2">
        </select>
    </div>


</body>
</html>

注意上面的$(“#dis2”).empty();这里是把查询的数据给清空.
for (var i = 0; i < json.length; i++) {

$(” #dis2”).append(“< option>”+json[i].dis_name+””);} append()追加的时候不会把之前根据城市查询到的区给清空,为了清空,使用$ (“#dis2”).empty();append()是追加到dis2的select标签

web.xml中配置:

<!--指定spring xml存在的路径，根据路径初始化ioc容器-->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext.xml</param-value>
    </context-param>

pom.xml中配置:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.lm</groupId>
    <artifactId>test_city</artifactId>
    <version>0.0.1-SNAPSHOT</version>

    <dependencies>
        <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
        <!-- json -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.8</version>
        </dependency>
        <!-- jstl -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/aopalliance/aopalliance -->
        <dependency>
            <groupId>aopalliance</groupId>
            <artifactId>aopalliance</artifactId>
            <version>1.0</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.aspectj/aspectjweaver -->
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.8.10</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>4.3.8.RELEASE</version>
        </dependency>

        <!-- 1spring的基础jar包 -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>4.3.8.RELEASE</version>
        </dependency>
        <!--spring对orm框架的支持包 -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>4.3.8.RELEASE</version>
        </dependency>
        <!-- hibernate所使用的包 -->
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-core</artifactId>
            <version>5.1.0.Final</version>
        </dependency>


        <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <!-- mysql的connector包 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.24</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/javax/javaee-api -->
        <!-- 一些servlet等的基本类的包 -->
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-api</artifactId>
            <version>7.0</version>
            <scope>provided</scope>
        </dependency>
        <!--JSON -->
        <!-- https://mvnrepository.com/artifact/net.sf.json-lib/json-lib -->

    </dependencies>

</project>

dao层注意实现接口,实现类中的事务处理使用属性HibernateTemplate属性,例如:
这里写图片描述

但是在spring.xml中,标签 < bean>中的class使用的是实现类的包名加实现类名 .但是在service层类里定义dao的属性的时候,要使用接口定义属性,这就是接口的用途.例如: 这里写图片描述

LM_AC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用ssh(servlet+spring+hibernate)+ajax实现城区联动

需求:选中城市,会显示出对应城市的区的名字在jsp页面,用到的是 < select>< option>标签,每个< option>有value属性,意思是指选中哪项,此select的value就是这个值. jsp页面:先获取所有的城市,通过el表达式显示在页面,区的显示就利用ajax实现.(通过调用.ajax({}) 函数)<%@ page language="java" contentTy
复制链接

扫一扫