前台使用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>
如有错误,欢迎指正,正在学习中
在页面上 :
<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>
如有错误,欢迎指正,正在学习中
相关文章推荐
- ThinkPHP定时ajax获取后台数据,使用javascript动态修改前端页面的表格来显示数据
- 根据下拉值,使用ajax动态获取数据(在页面显示数据)
- 使用vue框架 Ajax获取数据列表并用BootStrap显示出来
- DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
- [置顶] ajax请求到后台数据,前台不用拼接字符串append追加HTML标签,一样显示到页面 (使用空模板)
- ajax请求到后台数据,前台不用拼接字符串append追加HTML标签,使用空模板一样显示到页面
- JS使用ajax从xml文件动态获取数据显示的方法
- 使用echart从后台获取数据动态显示到页面
- 第一次使用echart从后台获取数据动态显示到页面
- [置顶] ajax请求得到后台数据,前台页面,使用table模板然后clone,显示表格,,不用append拼接 “字符串和HTML表格标签”
- 第一次使用echart从后台获取数据动态显示到页面
- JS使用ajax从xml文件动态获取数据显示的方法
- Ajax获取数据然后显示在页面的实现方法
- FusionCharts动态获取后台json数据 页面显示
- Jquery 使用Ajax获取后台返回的Json数据后,页面处理
- ThinkPHP +AJAX 联动从数据库无刷新提取数据,显示在页面的下拉框时出错!
- 异步获取数据Ajax,以及对获取的数据进行绑定(显示在页面上)
- AJAX获取数据然后显示在页面
- 给ajax留一个模板,通过后台传递json获取数据,并用table显示,方便以后使用
- YII框架中使用jQuery UI : 自动完成(Autocomplete)--本地数据和使用ajax获取远程数据实例