前台使用ajax动态获取数据并且显示在页面上,SSM框架二级联动

来源:互联网 发布:淘宝pc客户端登入 编辑:程序博客网 时间:2024/04/26 08:05

首先是使用注解的方式操作


在页面上 :

 <select name="province" class="province" id="province">

           <option value="0">----请选择省份----</option>
       </select>
       <select name="city" class="city" id="city">
           <option value="0">------请选择城市-----</option>

       </select>

使用jQuery

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
       $(function(){
    $.ajax({
         url:'test/select.do',
         data:{},
         type:'get',
         success:function(data){
             $(data).each(function(index){
                 $("#province").append(
                    '<option value="'+data[index].pid+'" id="'+index+'">'+data[index].province+'</option');
             });
         }
    });
    
  $("#province").bind("change",function(){
      var pid=$(this).val();
      //每点一次就清空一次
      $("#city").html('<option value="0">----请选择省份----</option>');
     /*  $.post("test/secondSelect.do",
              {"pid":pid},
              function(data){
                $(data).each(function(index){
                  $("#city").append(
                     '<option value="'+data[index].cid+'">'+data[index].city_name+'</option>'
                  );
               
                });
                  
              });   */
       $.ajax({
               url:'test/secondSelect.do',
               data:{"pid":pid},
               type:'post',
               success:function(data){
                    $(data).each(function(index){
                       $("#city").append(
                          '<option value="'+data[index].cid+'">'+data[index].city_name+'</option>'
                       );
                    });
               }
       
              });
  });
        });
    
    </script>

使用mvc模式

在controller层获取数据

   @RequestMapping(value="/select.do")
    @ResponseBody
    public Object select(){
    List<Province> list=(List<Province>) service.selectProvinceFromDB();
    return list;
    }
    @RequestMapping(value="/secondSelect.do")
    @ResponseBody
    public Object secondSelect(HttpServletRequest request){
    String pidStr = request.getParameter("pid");
        Integer pid = Integer.valueOf(pidStr);
    List<City> list=service.secondSeclectFromDB(pid);
    System.out.println(list.size());
    return list;
   
    }

在dao层时使用mapper映射 其中id名称为dao中的方法名 ,因为二级联动,所以会有外键,所以结果应该使用resultMap

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE mapper  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"  
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ssm.dao.IStudentDao">
    <resultMap type="Student" id="studentmapper">
       <id column="id" property="id"/>
       <result column="name" property="name"/>
       <result column="age" property="age"/> 
    </resultMap>
    <select id="selectStudent" resultMap="studentmapper">
       select id from student where name=#{0} and age=#{1}
    </select>
   <!-- ============================================================= -->
    <select id="selectProvince" resultType="Province">
       select pid,province
       from province
      <!--  <if test="list!=null and list.size>0">
           where pid in
           <foreach collection="list" open="(" close=")" item="pro" separator=",">
             #{pro.pid}
           </foreach>
       </if>        -->
    </select>
    <select id="findAllCity" resultType="City">
        select cid,city_name(字段名) from city where p_id=#{pid}
    </select>
    
    
</mapper>

配置文件

spring-tx.xml


 <!--注册事务管理器  -->
      <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
           <property name="dataSource" ref="dataSource"/>
      </bean>
     <!--  <tx:advice id="advice" transaction-manager="transactionManager">
         <tx:attributes>
            <tx:method name="find*" isolation="DEFAULT" propagation="REQUIRED"/>
         </tx:attributes>
      </tx:advice>
      
      <aop:config>
         <aop:pointcut expression="execution(* *..service.*.*(..))" id="pointcut"/>
         <aop:advisor advice-ref="advice" pointcut-ref="pointcut"/>
      </aop:config> -->

     以下是注解方式
      <tx:annotation-driven transaction-manager="transactionManager"/>       
    

spring-service.xml

 <context:component-scan base-package="com.ssm.service"/>

<!-- spring-mvc-xml-->

 spring-mvc-xml

  <context:component-scan base-package="com.ssm.handlers"/>
       <!--开启注解驱动 使用了ajax 对于json格式,需要转换器 -->
      <mvc:annotation-driven>
     <mvc:message-converters>
           <bean class="org.springframework.http.converter.StringHttpMessageConverter"/>
           <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>
     </mvc:message-converters>
       </mvc:annotation-driven>

        <!--将springmvc不能处理的交给tomcat处理  -->
        <mvc:default-servlet-handler/>


spring-mybatis.xml

   注册sqlSessionFactotyBean

  <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
          <property name="dataSource" ref="dataSource"/>

         指定mybatis主配置文件的位置
          <property name="configLocation" value="classpath:resources/mybatis.xml"/>
     </bean>

注册mapper扫面配置器
     <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">

      指定基本包
        <property name="basePackage" value="com.ssm.dao"/>
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
     </bean>

jdbc.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://127.0.0.1:3306/test
jdbc.user=root
jdbc.password=160216

spring-db.xml

  注册数据源:c3p0数据源

  <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
          <property name="driverClass" value="${jdbc.driver}"/>
          <property name="jdbcUrl" value="${jdbc.url}"/>
          <property name="user" value="${jdbc.user}"/>
          <property name="password" value="${jdbc.password}"/>
      </bean>

  注册册jdbc属性文件
      <context:property-placeholder location="classpath:resources/jdbc.properties"/>


mybatis.xml

<configuration>

  别名
   <typeAliases>
      <package name="com.ssm.beans"/>
   </typeAliases>
mapper位置  

 <mappers>
      <package name="com.ssm.dao"/>
   </mappers>
</configuration>



如有错误,欢迎指正,正在学习中



阅读全文
0 0