您的位置:首页 > 其它

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

2017-11-15 13:52 846 查看
首先是使用注解的方式操作

在页面上 :

 <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>

如有错误,欢迎指正,正在学习中
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  SSM ajax 框架 数据
相关文章推荐